What are the rendering strategies in Next.js (SSR, SSG, ISR, CSR)?

Q: What are the rendering strategies in Next.js (SSR, SSG, ISR, CSR)?

**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 Think of four bakeries. One bakes all bread before opening (SSG). One bakes before opening and bakes a fresh batch whenever a shelf gets too old (ISR). One bakes each loaf when you order (SSR). One hands you dough and an oven to bake at home (CSR). The modern bakery does the first for the loaf and the third for your personal message on the cake, in the same order (PPR). ## 2. The Core Idea 📌 **Interview term: SSG** —

The problem

Question presented to candidate: "Walk me through SSG, ISR, SSR, CSR and PPR in Next.js. How do you get each one in the App Router, and how do you choose?"

What a strong answer should cover:

SSG (static): rendered at build time and served as a file; the default for routes without request data.
ISR: static plus regeneration after a lifetime (revalidate) or on demand (revalidatePath, revalidateTag).
SSR (dynamic): rendered on each request, triggered by request-time APIs or uncached data; improved by streaming with Suspense.
CSR: rendering and data fetching in the browser inside Client Components, for interactive or private parts.
PPR (Next.js 16 with Cache Components): a static shell with dynamic holes streamed in the same response; the build shows each route mode with a symbol.

Clarifying questions expected:

"Is the data the same for every user?" — static or ISR; otherwise dynamic or holes.
"How fresh must it be?" — decides ISR lifetimes and on-demand revalidation.

Code / implementation expected: Yes — one route per strategy.

nextjs
rendering
ssr
ssg
isr

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

Think of four bakeries. One bakes all bread before opening (SSG). One bakes before opening and bakes a fresh batch whenever a shelf gets too old (ISR). One bakes each loaf when you order (SSR). One hands you dough and an oven to bake at home (CSR). The modern bakery does the first for the loaf and the third for your perso

The solution is hidden so you can try first

6 min read · 8 sections

Read the code

One route per strategy

// SSG: app/about/page.tsx
export default function About() { return <h1>About us</h1>; }

// ISR: app/news/page.tsx
export const revalidate = 300;
export default async function News() { const n = await getNews(); return <List items={n} />; }

// SSR: app/account/page.tsx
import { cookies } from "next/headers";
export default async function Account() { const user = await getUser((await cookies()).get("sid")?.value); return <p>{user.name}</p>; }

// CSR: components/Live.tsx
"use client";
import useSWR from "swr";
export function Live() { const { data } = useSWR("/api/live", (u) => fetch(u).then((r) => r.json())); return <p>{data?.value ?? "..."}</p>; }

// PPR (next.config: cacheComponents: true): static shell + <Suspense><Personal /></Suspense>

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.