Next.js Developer interview question · Most asked
Explain SSR, SSG, ISR and CSR in Next.js.
Summary
SSG pre-renders pages at build time; ISR (Incremental Static Regeneration) re-generates static pages in the background after a revalidation period or on demand; SSR renders on every request; CSR renders in the browser after loading JavaScript.
Longer Answer
App Router mapping: a route is static by default if it uses no dynamic APIs (SSG). export const revalidate = 60 or fetch(..., { next: { revalidate: 60 } }) gives ISR. Using cookies()/headers()/uncached data makes it dynamic (SSR). Client Components with client-side fetching are CSR. Choose based on data freshness and personalization needs.
Key Points
- SSG: build time, fastest
- ISR: static + periodic/on-demand refresh
- SSR: per request, personalized
- CSR: browser rendering for interactivity
Comparison / Tradeoffs
| Strategy | When rendered | Best for |
|---|---|---|
| SSG | Build | Docs, marketing |
| ISR | Build + revalidate | Catalogs, blogs |
| SSR | Each request | Personalized dashboards |
| CSR | Browser | Highly interactive widgets |
More most-asked Next.js Developer questions
- How does data fetching work in the App Router?
- How did caching defaults change in Next.js 15?
- What happens, step by step, when a request reaches a Next.js App Router application?
- What is Next.js and what problems does it solve on top of React?
- What are the differences between the App Router and the Pages Router?
- What is the difference between Server Components and Client Components?
- Explain the App Router file conventions: page, layout, loading, error, not-found, template and route.
- What are Server Actions and how do you use them for mutations?