Next.js Rendering

Next.js Rendering: Static Site Generation, Dynamic Rendering, and ISR

Next.js Rendering covers the core strategies for serving web content: Static Rendering (SSG), Dynamic Rendering (SSR), and Incremental Static Regeneration (ISR).

Next.js automatically determines whether a route segment should be rendered statically or dynamically based on the functions and data fetching methods used within that segment.

The Three Core Rendering Modes

Static Rendering (Default)

If a route uses uncached data fetches or dynamic header functions, Next.js generates static HTML once at build time for high performance:

// app/about/page.tsx - Static Rendering
export default function AboutPage() {
  return (
    <div className="p-6">
      <h1 className="text-2xl font-bold">About Our Company</h1>
      <p className="mt-2 text-gray-600">This static view is built once at build time.</p>
    </div>
  );
}

Dynamic Rendering

Accessing dynamic parameters such as cookies(), headers(), or using { cache: 'no-store' } automatically switches a route segment to dynamic request-time rendering:

// app/dashboard/page.tsx - Dynamic Rendering
import { cookies } from 'next/headers';

export default async function Dashboard() {
  const cookieStore = await cookies();
  const token = cookieStore.get('token');

  return (
    <div>
      <h1>User Dashboard</h1>
      <p>Session Token: {token?.value}</p>
    </div>
  );
}

Incremental Static Regeneration (ISR)

ISR updates static pages in the background without needing a complete application rebuild:

// app/blog/[id]/page.tsx - ISR
export const revalidate = 60; // Revalidate page at most once every 60 seconds

export default async function Post({ params }: { params: Promise<{ id: string }> }) {
  const { id } = await params;
  const res = await fetch(`https://api.example.com/posts/${id}`);
  const post = await res.json();

  return (
    <article className="p-6">
      <h1 className="text-3xl font-bold">{post.title}</h1>
      <p className="mt-4">{post.content}</p>
    </article>
  );
}

Best Practices

• Default to Static Generation: Keep pages static whenever possible to maximize CDN performance.
• Use ISR for Growing Content: Implement ISR on blogs and catalog listings to combine static speed with updated data.

Summary

Next.js offers flexible rendering options for any use case. Combining SSG, SSR, and ISR allows applications to achieve optimal performance without architectural trade-offs.