Summary
The four classic strategies trade freshness, latency, and server cost. CSR ships an empty shell and renders in the browser; SSR renders per request; SSG renders once at build; ISR is SSG that re-generates in the background. In the modern App Router these are per-route (even per-component) decisions, not a whole-app mode.
Jump to the interview angleThe two axes
Every strategy answers where HTML is built (server or browser) and when (build time, request time, or lazily revalidated). In the App Router it's a per-route call, not a whole-app mode.
CSR · SSR · SSG · ISR
| Where / when | Freshness | TTFB | Best for | |
|---|---|---|---|---|
| CSR | Browser, after load | Every load | Low (empty shell) | Interactive, auth-gated shells |
| SSR | Server, per request | Per request | Higher (compute) | Personalized, crawlable pages |
| SSG | Server, at build | Until next deploy | Lowest (CDN) | Docs, marketing |
| ISR | Build + background re-gen | Bounded (revalidate) | Lowest (CDN) | Catalogs, blogs |
Quick decision
Static by default → ISR when it changes between deploys → SSR only when you read request data (cookies, headers) → CSR for interactive, auth-gated views.
Tradeoffs
Pros
- Per-route choice optimizes each page for its real freshness/personalization needs.
- SSG/ISR push work to build/CDN — lowest latency and server cost at scale.
- SSR/ISR give crawlable HTML without a separate prerender service.
Cons
- More modes = more ways to ship a subtly stale or accidentally-dynamic page.
- ISR adds cache-invalidation complexity.
- CSR-only hurts LCP and SEO.
Interview angle
Interviewers want diagnosis, not definitions. Don't list acronyms — pick the right one per route and justify it by freshness and personalization. Noting the App Router makes this a per-segment decision (and PPR blends static + dynamic) signals you're current.
Soundbite: "Rendering is a per-route call on two axes — how fresh, how personal. Static + ISR default; dynamic where I read request data; CSR for interactive auth-gated parts."
Key terms
- TTFB
- Time To First Byte — how long until the server starts sending HTML. SSR raises it; CDN-served SSG minimizes it.
- Revalidation
- Re-generating a cached page either after a time window (time-based) or via an explicit trigger (on-demand).
- Hydration
- Attaching React event handlers and state to server-rendered HTML so it becomes interactive.