Next.js Rendering Modes
SSR, SSG, ISR, and client rendering — when each helps, and how to talk about them in interviews.
- nextjs
- ssr
- ssg
- rendering
Next.js is a routing and rendering toolkit on top of React. Interviews probe whether you can pick a rendering strategy for a page’s data freshness, SEO, and TTFB needs.
Modes (conceptual)
| Mode | When HTML is produced | Best for |
|---|---|---|
| SSG | Build time | Docs, marketing, changelogs |
| SSR | Each request | Personalized, highly dynamic SEO pages |
| ISR | Build + revalidate | Catalogs that update periodically |
| Client | Browser | Dashboards behind auth, highly interactive widgets |
App Router uses Server Components by default, with explicit "use client" boundaries. Pages Router used getStaticProps / getServerSideProps. Speak to both if your target company still runs Pages Router.
Decision checklist
- Does the page need to be indexed with meaningful content? → server-rendered HTML helps
- Is data user-specific? → avoid shared static cache without variation
- Can data be stale for N seconds? → revalidate / ISR
- Is the interaction heavy and private? → client fetch after shell
Streaming
Streaming SSR sends HTML in chunks so the shell paints while slow components wait. Use loading UI (loading.tsx / Suspense) so users see structure early.
Common mistakes
- Fetching everything client-side “for simplicity” and losing SEO + performance
- SSG of personalized pages
- Giant client bundles because Server Components were never leveraged
- Caching authenticated responses at the CDN incorrectly
Interview one-liner
“Pick where HTML and data are bound: build, request, or browser — based on freshness, personalization, and critical path. Next is a set of defaults around that choice.”
Related guides
- Auth Patterns OverviewAuth in Next.js App Router: cookies/sessions, middleware gates, server checks, and avoiding client-only security theater.
- Caching in Next.js OverviewNext.js caching layers: request memoization, data cache, full route cache, and router cache — what invalidates each.
- Client Components in Next.jsClient Components in the App Router: use client, hydration, bundling boundaries, and patterns that keep JS small.
- Data Fetching Patterns App RouterFetch data in Server Components with async/await and fetch caching: colocation, parallel requests, and client fallbacks.
- Deploying Next on VercelDeploy Next.js on Vercel: git integration, env vars, previews, build cache, and production checklist.