Next.js Rendering Strategies Comparison

// Fully static - built at build time
export default async function StaticPage() {
  const data = await fetch('https://api.example.com/data', {
    cache: 'force-cache', // Default - caches indefinitely
  });
  return <div>{data}</div>;
}

// With generateStaticParams
export async function generateStaticParams() {
  const posts = await getPosts();
  return posts.map((post) => ({ slug: post.slug }));
}

// Dynamic - rendered on each request
export const dynamic = 'force-dynamic';

export default async function SSRPage() {
  const data = await fetch('https://api.example.com/data', {
    cache: 'no-store', // Always fresh
  });
  return <div>{data}</div>;
}

// Revalidate after specified seconds
export const revalidate = 60; // Revalidate every 60 seconds

export default async function ISRPage() {
  const data = await fetch('https://api.example.com/data', {
    next: { revalidate: 60 },
  });
  return <div>{data}</div>;
}

// On-demand revalidation
// app/api/revalidate/route.ts
import { revalidatePath, revalidateTag } from 'next/cache';

export async function POST() {
  revalidatePath('/blog');
  // or
  revalidateTag('blog-posts');
  return Response.json({ revalidated: true });
}