Kevin Powell - Community•3w ago

Next JS Caching Doubts

I am trying to get familiar with next js by following one of the projects in the youtube. Using next js v15, I have a postgres db with drizzle ORM, Using server actions to fetch the data. So I have a home page which lists the data by fetching from the server. in the dev mode, the data is fetching dynamically for every render where as when i try to build for production. the home page is prerendered and its giving the same data everytime. I want it to be specific for each user when they authenticate. I have Gone through docs , I have found two options either exporting

export const dynamic = 'force-dynamic'

export const dynamic = 'force-dynamic'

or using revalidate property to rerender after certain period of stale time. What is the best approach in these situations? please suggest me your way of approaching that would be helpful.

5 Replies

stealthyOP•2w ago

dashboard.tsx

import { InvoiceDetails } from "@/components/invoice/invoice-details";
import { Button } from "@/components/ui/button";
import { Loader } from "@/components/ui/loader";
import { CirclePlus } from "lucide-react";
import Link from "next/link";
import { Suspense } from "react";
const Dashboard = () => {
  return (
    <main>
      <header className="flex justify-between flex-wrap py-4">
        <h1 className="font-semibold text-2xl md:text-3xl">Invoice</h1>
        <Button variant={"ghost"} asChild>
          <Link href="/invoice/new">
            <CirclePlus className="size-4" />
            Create Invoice
          </Link>
        </Button>
      </header>
      <Suspense fallback={<Loader />}>
        <InvoiceDetails />
      </Suspense>
    </main>
  );
};
export default Dashboard;

import { InvoiceDetails } from "@/components/invoice/invoice-details";
import { Button } from "@/components/ui/button";
import { Loader } from "@/components/ui/loader";
import { CirclePlus } from "lucide-react";
import Link from "next/link";
import { Suspense } from "react";
const Dashboard = () => {
  return (
    <main>
      <header className="flex justify-between flex-wrap py-4">
        <h1 className="font-semibold text-2xl md:text-3xl">Invoice</h1>
        <Button variant={"ghost"} asChild>
          <Link href="/invoice/new">
            <CirclePlus className="size-4" />
            Create Invoice
          </Link>
        </Button>
      </header>
      <Suspense fallback={<Loader />}>
        <InvoiceDetails />
      </Suspense>
    </main>
  );
};
export default Dashboard;

InvoiceDetails.tsx

import { getInvoices } from "@/actions/invoices";
import { InvoiceRow } from "@/components/invoice/invoice-row";
import {
  Table,
  TableBody,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";
export const InvoiceDetails = async () => {
  const invoices = await getInvoices();
  return (
    <Table>
      <TableHeader>
        <TableRow>
          <TableHead>Date</TableHead>
          <TableHead>Customer</TableHead>
          <TableHead>Email</TableHead>
          <TableHead className="text-center">Status</TableHead>
          <TableHead className="text-right">Value</TableHead>
        </TableRow>
      </TableHeader>
      <TableBody>
        {invoices.map((invoice) => (
          <InvoiceRow key={invoice.invoice_id} invoice={invoice} />
        ))}
      </TableBody>
    </Table>
  );
};

import { getInvoices } from "@/actions/invoices";
import { InvoiceRow } from "@/components/invoice/invoice-row";
import {
  Table,
  TableBody,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";
export const InvoiceDetails = async () => {
  const invoices = await getInvoices();
  return (
    <Table>
      <TableHeader>
        <TableRow>
          <TableHead>Date</TableHead>
          <TableHead>Customer</TableHead>
          <TableHead>Email</TableHead>
          <TableHead className="text-center">Status</TableHead>
          <TableHead className="text-right">Value</TableHead>
        </TableRow>
      </TableHeader>
      <TableBody>
        {invoices.map((invoice) => (
          <InvoiceRow key={invoice.invoice_id} invoice={invoice} />
        ))}
      </TableBody>
    </Table>
  );
};

server action

export const getInvoices = async () => {
  const result = await db.select().from(Invoices).orderBy(Invoices.createTs);
  return result;
};

export const getInvoices = async () => {
  const result = await db.select().from(Invoices).orderBy(Invoices.createTs);
  return result;
};

just following up on this.

vinter.•2w ago

It just depends on what the data is. ISR is clearly better if staleness is acceptable Generally speaking it's not the case for user specific data

stealthyOP•2w ago

so in case of user specific data, force dynamic rendering would be better option?

vinter.•2w ago

Yup Or well, it depends on how tollerant you are about the user seeing stale data If the only data loaded in the page isn't supposed to be completely up to date (i.e. a feed of user recommendations which are personalized but don't necessarily have to be 100% fresh) then you can ISR But in your case it looks like you're handling invoices which I assume are supposed to be present in the dashboard as soon as one is inserted in the db And in that case you want to force dynamic rendering yeah

stealthyOP•2w ago

got it, thanks for your insights

Gaming

Programming

Next JS Caching Doubts