Cache Components for Enterprise Dashboards

Use Cache Components, Suspense, tags, and explicit invalidation to keep dashboards fast and correct.

35 min

3 sections

cache-components

suspense

revalidation

performance

01. Default to fresh data, cache deliberately

Section 1 of 3

In current Next.js, fetch requests are not cached by default. That is a safer baseline for authenticated enterprise data. Cache only the parts of the UI that can tolerate staleness, and make the cache key include the tenant boundary.

typescript

// app/(app)/org/[orgId]/dashboard/page.tsx
import { Suspense } from "react";

export default async function DashboardPage({
  params,
}: {
  params: Promise<{ orgId: string }>;
}) {
  const { orgId } = await params;

  return (
    <main>
      <DashboardShell orgId={orgId} />
      <Suspense fallback={<TicketQueueSkeleton />}>
        <LiveTicketQueue orgId={orgId} />
      </Suspense>
    </main>
  );
}

Streaming and Suspense

Metadata and SEO

Back to Course