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?

**Target Audience:** Frontend engineers preparing for Next.js interviews — assumes basic React and App Router familiarity. **Difficulty:** Medium > **How to read this doc:** Each idea is explained in plain language first, then tagged with `📌 Interview term:`. Every behaviour claim was checked against the Next.js docs shipped with the package (written on 16.3.4, re-reviewed against 16.4.2) and, in the **Verified** section, against real output from a build or a running server; each Verified block names the version it ran on. ## 1. Why This Even Matters — A Story First A static page is a printed flyer: made once, handed out instantly, identical for everyone. A dynamic page is a letter written for each reader: personal, but someone has to write it while the reader waits. ISR is a flyer that gets reprinted every half hour. The framework decides which one you are making by watching what the page reads: the moment it looks at the reader (their cookies, their headers), it has to write a le

The problem

Question presented to candidate: "How does Next.js decide whether a route is static or dynamic, how can you tell which one you got, and what does each choice cost?"

What a strong answer should cover:

Static rendering happens at build time (or at revalidation); the result is served as a file to every user.
Dynamic rendering happens on each request; it is needed for per-request data.
Using a Request-time API such as cookies(), headers(), searchParams or connection(), or uncached data, makes a route dynamic.
The build output shows the result per route: ○ static, ● SSG with generateStaticParams, ƒ dynamic, and ◐ partial prerender with Cache Components.
The cost of dynamic is time to first byte, which streaming with loading.js or PPR reduces.

Clarifying questions expected:

"Does the content depend on who is asking?" — if not, it should be static.
"How fresh must it be?" — minutes of staleness allow static with revalidation (ISR).

Code / implementation expected: Yes — one static page, one ISR page and one dynamic page.

nextjs
static
dynamic
rendering

Try it yourself

Sketch your approach before you read the solution. That is what the interview tests.

Stuck? Get a hint.

A short nudge toward the approach. It will not give the answer away.

Solution

Target Audience: Frontend engineers preparing for Next.js interviews — assumes basic React and App Router familiarity. Difficulty: Medium

How to read this doc: Each idea is explained in plain language first, then tagged with 📌 Interview term:. Every behaviour claim was checked against the Next.js docs shipped with the package (written on 16.3.4, re-reviewed against 16.4.2) and, in the Verified section, against real output from a build or a running server; each Verified block names the version it ran on.

1. Why This Even Matters — A Story First

A static page is a printed flyer: made once, handed out instantly, identical for everyone. A dynamic page is a letter written for each reader: personal, but someone has to write it while the reader waits. ISR is a flyer that gets reprinted every half hour. The framework decides which one you are making by watching what th

The solution is hidden so you can try first

7 min read · 8 sections

Read the code

Static, ISR and dynamic pages side by side

// app/page.tsx  -> static (○): no request data
export default function Home() {
  return <h1>Welcome</h1>;
}

// app/news/page.tsx  -> ISR (○ with a lifetime)
export const revalidate = 30;
export default async function News() {
  const items = await getHeadlines();
  return <ul>{items.map((i) => <li key={i.id}>{i.title}</li>)}</ul>;
}

// app/account/page.tsx  -> dynamic (ƒ): reads the request
import { cookies } from "next/headers";
export default async function Account() {
  const theme = (await cookies()).get("theme")?.value ?? "light";
  return <p>Your theme: {theme}</p>;
}

Discussion

Other approaches, follow-ups and how it went in real interviews.

Sign in to join the discussion.

No comments yet. Share how you would answer it.

The solution is hidden so you can try first

Keep your momentum going.