mediumFrontend

What is the difference between static and dynamic rendering in the Next.js App Router?

Q: What is the difference between static and dynamic rendering in the Next.js App Router?

**TL;DR.** **Static rendering** produces HTML at **build time** (or on revalidation) and serves it from **cache**; **dynamic rendering** runs **per request**. A route becomes dynamic when it uses **dynamic functions** ( cookies , headers , searchParams ) or **uncached** data; otherwise Next.js renders it **statically by default**. static (default) built once, cached/CDN fastest dynamic <text class='d-sub' x='340' y='78' te

994 views

Understand the problem

Build-time HTML vs per-request rendering.

nextjsstaticdynamicrendering

Attempt it yourself

Sketch your approach before reading the solution — that's what interviews test.

Stuck? AI Nudge Available

Get a conceptual hint to guide your logic without spoiling the final implementation.

Study the solution

The solution is waiting

Give it an honest attempt first — then compare your thinking with the full walkthrough.

Read the code

A dynamic function forces per-request rendering

import { cookies } from 'next/headers';

export default async function Page() {
  const theme = (await cookies()).get('theme')?.value;  // → route is now DYNAMIC
  return <div data-theme={theme}>…</div>;
}

// Without cookies()/headers()/no-store, this route would be STATIC by default.
// Force it explicitly:  export const dynamic = 'force-static';

Join the discussion

Discussion (0)

No responses yet. Be the first to share what you think.

How does Next.js decide between static and dynamic rendering at build time?

What is the Data Cache in Next.js and how do you opt out of it?