Server-Side Rendering (SSR) & Static Site Generation (SSG)

Server-Side Rendering (SSR) & Static Site Generation (SSG)

Next.js App Router automatically chooses the optimal rendering strategy for every page: Static Rendering (Static Site Generation or SSG) or Dynamic Rendering (Server-Side Rendering or SSR).

Static Rendering (SSG)

By default, routes are statically rendered. Next.js fetches data and pre-renders HTML at build time (when running next build). The static HTML and JSON are cached on a Content Delivery Network (CDN) edge server.

Benefits of Static Rendering:

• Ultra-fast responses: Served directly from Edge CDN caches.
• Reduced database load: Database queries run once during build, not per user request.

// app/about/page.tsx - Statically Rendered by default
export default function AboutPage() {
  return (
    <main className="p-8">
      <h1>About Our Company</h1>
      <p>This page is static and generated at build time.</p>
    </main>
  );
}

Dynamic Rendering (SSR)

If a route uses Dynamic Functions or uncached data requests, Next.js automatically switches the page to Dynamic Rendering. HTML is generated on the server for every incoming user request.

Dynamic Functions in Next.js:

• cookies(): Accessing request cookies.
• headers(): Reading HTTP request headers.
• searchParams prop: Accessing URL query parameters.

// app/user-profile/page.tsx - Dynamically Rendered on every request
import { cookies } from 'next/headers';

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

  return (
    <main className="p-8">
      <h1>User Dashboard</h1>
      <p>Session Token: {token?.value ? 'Active' : 'Guest'}</p>
    </main>
  );
}

SSR vs SSG Comparison

TL;DR

• Pages without dynamic functions automatically render statically at build time (SSG).
• Accessing cookies(), headers(), or searchParams switches rendering to dynamic SSR.
• Static pages are cached globally across Vercel / Edge CDNs for ultimate performance.
• Dynamic pages pre-render HTML on demand for each individual request.