Static vs Dynamic Rendering

// Static by default -- no dynamic functions, no uncached fetches
export default async function AboutPage() {
  return <h1>About Us</h1>; // Built at deploy time
}
 
// Becomes dynamic automatically when using dynamic functions
import { cookies } from "next/headers";
 
export default async function DashboardPage() {
  const cookieStore = await cookies(); // This opts into dynamic rendering
  return <h1>Dashboard</h1>;
}
 
// Force static or dynamic with segment config
export const dynamic = "force-dynamic"; // Always render at request time
export const dynamic = "force-static";  // Always render at build time
 
// Pre-render dynamic routes at build time
export async function generateStaticParams() {
  const posts = await fetchAllPosts();
  return posts.map((p) => ({ slug: p.slug }));
}

// app/blog/[slug]/page.tsx -- Static generation with generateStaticParams
import { notFound } from "next/navigation";
 
type Post = { slug: string; title: string; content: string; date: string };
 
async function getPost(slug: string): Promise<Post | null> {
  const res = await fetch(`https://api.example.com/posts/${slug}`, {
    next: { tags: [`post-${slug}`] },
  });
  if (!res.ok) return null;
  return res.json();
}
 
// Pre-render these paths at build time
export async function generateStaticParams() {
  const res = await fetch("https://api.example.com/posts");
  const posts: Post[] = await res.json();
 
  return posts.map((post) => ({
    slug: post.slug,
  }));
}
 
// Generate metadata for each post
export async function generateMetadata({
  params,
}: {
  params: Promise<{ slug: string }>;
}) {
  const { slug } = await params;
  const post = await getPost(slug);
  if (!post) return { title: "Not Found" };
  return { title: post.title };
}
 
export default async function BlogPost({
  params,
}: {
  params: Promise<{ slug: string }>;
}) {
  const { slug } = await params;
  const post = await getPost(slug);
  if (!post) notFound();
 
  return (
    <article className="prose max-w-2xl mx-auto p-6">
      <h1>{post.title}</h1>
      <time className="text-gray-500">{post.date}</time>
      <div dangerouslySetInnerHTML={{ __html: post.content }} />
    </article>
  );
}

// app/dashboard/page.tsx -- Dynamic rendering (uses cookies)
import { cookies } from "next/headers";
import { db } from "@/lib/db";
import { verifySession } from "@/lib/auth";
 
export default async function DashboardPage() {
  const cookieStore = await cookies();
  const token = cookieStore.get("session")?.value;
  const session = await verifySession(token);
 
  if (!session) {
    return <p>Please sign in</p>;
  }
 
  const stats = await db.userStats.findUnique({
    where: { userId: session.userId },
  });
 
  return (
    <main className="p-6">
      <h1 className="text-2xl font-bold">Welcome, {session.user.name}</h1>
      <div className="grid grid-cols-3 gap-4 mt-6">
        <StatCard label="Orders" value={stats?.orders ?? 0} />
        <StatCard label="Revenue" value={`$${stats?.revenue ?? 0}`} />
        <StatCard label="Customers" value={stats?.customers ?? 0} />
      </div>
    </main>
  );
}
 
function StatCard({ label, value }: { label: string; value: string | number }) {
  return (
    <div className="border rounded p-4">
      <p className="text-sm text-gray-500">{label}</p>
      <p className="text-2xl font-bold">{value}</p>
    </div>
  );
}

// Allow rendering of paths not pre-generated (default behavior)
export const dynamicParams = true;
 
// Return 404 for paths not pre-generated
export const dynamicParams = false;

// Revalidate all pages under this layout every 60 seconds
export const revalidate = 60;
 
// Never revalidate (fully static until next deploy)
export const revalidate = false;

import { Suspense } from "react";
import { cookies } from "next/headers";
 
// The static shell renders at build time
export default function Page() {
  return (
    <main>
      <h1>Product Page</h1> {/* Static */}
      <StaticProductInfo />  {/* Static */}
 
      <Suspense fallback={<p>Loading cart...</p>}>
        <DynamicCartPreview /> {/* Dynamic -- calls cookies() */}
      </Suspense>
    </main>
  );
}
 
async function DynamicCartPreview() {
  const cookieStore = await cookies();
  const cartId = cookieStore.get("cart-id")?.value;
  // ...
}

// generateStaticParams return type
export async function generateStaticParams(): Promise<{ slug: string }[]> {
  // ...
}
 
// For nested dynamic routes
export async function generateStaticParams(): Promise<{
  category: string;
  slug: string;
}[]> {
  // ...
}
 
// Segment config types
export const dynamic: "auto" | "force-dynamic" | "force-static" | "error" = "auto";
export const dynamicParams: boolean = true;
export const revalidate: number | false = false;
export const runtime: "nodejs" | "edge" = "nodejs";