Explain SSR, SSG, ISR and CSR in Next.js.
Assesses fundamental understanding of Next.js conventions, runtime behavior, and memory/performance considerations.
Hiring managers look for precision, avoidance of ambiguous jargon, and ability to explain trade-offs under real production conditions.
These describe when HTML is produced. CSR ships a minimal shell plus a JS bundle; the browser fetches data and renders, so first paint is slower and SEO weaker, but navigation feels app-like. SSR generates HTML on each request, giving fresh crawlable content at the cost of server work and higher time to first byte. SSG renders at build time and serves the same HTML from a CDN, which is fastest and cheapest but only suits content that rarely changes. ISR is static generation with revalidation: pages are served statically and regenerated in the background after revalidate seconds, combining speed with freshness.
const res = await fetch(url, { next: { revalidate: 60 } });
Use SSR for personalised or real-time pages, SSG and ISR for blogs and marketing, and CSR for dashboards behind auth. In the App Router, per-route segment config such as dynamic and revalidate selects the mode.
Candidate Response Strategy & Interview Tips
- Start with a concise one-sentence summary: Deliver a direct, confident answer first before expanding into nuances.
- Demonstrate real-world trade-offs: Discuss where this approach excels and when you would avoid it in production systems.
- Discuss complexity & edge cases: Proactively explain time/space complexity or boundary conditions (null values, scale limits).
- Prepare for interviewer follow-ups: Technical hiring panels frequently probe deeper into concurrency, backward compatibility, or alternative libraries.