Lesson 10 / 25

Static Versus Dynamic Rendering

Build time or request time.

What makes a route dynamic

By default Next.js prerenders routes as static when it can. A route becomes dynamic when it uses request-time information: cookies, headers, search params, or an explicit opt-in such as await connection() from next/server. Static pages are served from a cache with the content fixed at build (or revalidation) time; dynamic pages run on every request. Choose static for shared content and dynamic only where needed.

Fresh enough, fast enough

Choose per route how fresh data must be, and let Next.js cache and revalidate the rest.

Four ideas: static versus dynamic, prerendering, caching models, revalidation.
Figure 4.1 — Static, prerendering, caching and revalidation.

Two pages showing the time

This file is from a small demo store I built with Next.js 16.3.8, React 19.3 and TypeScript; next build compiled and type-checked it successfully. Both pages print the current time; the dynamic one awaits connection() to render on each request.

// app/time/static/page.tsx
export default function StaticTime() {
  return <p>Rendered at {new Date().toISOString()}</p>;      // fixed at build time
}

// app/time/dynamic/page.tsx
import { connection } from "next/server";

export default async function DynamicTime() {
  await connection();                                         // opt into rendering per request
  return <p>Rendered at {new Date().toISOString()}</p>;
}

Requesting each page twice, run

I built the demo store with next build (Next.js 16.3.8), started it with next start and requested pages with curl; the output is copied from that run, trimmed to the relevant lines. The static page shows the same time on both requests, the moment it was rendered at build; the dynamic page shows a new time on each request. The static and dynamic labels were added to the output for readability.

for i in 1 2; do curl -s localhost:3917/time/static; curl -s localhost:3917/time/dynamic; sleep 1; done

Output:

static : Rendered at 2026-10-01T21:26:15.615Z
dynamic: Rendered at 2026-10-01T21:26:32.961Z
static : Rendered at 2026-10-01T21:26:15.615Z
dynamic: Rendered at 2026-10-01T21:26:33.996Z

Quick check: Why did the static page show the same timestamp on every request?

  • It was rendered once at build time and served from cache
  • The clock was broken
  • Static pages render in the browser
  • curl caches responses
Answer

It was rendered once at build time and served from cache — Static means rendered ahead of time.