Next.js / SSR & SSG
A React meta-framework adding SSR, SSG, ISR, and file-based routing to solve SEO and initial load.
Next.js is a React meta-framework that adds server-side rendering (SSR), static site generation (SSG), and file-based routing. It solves two problems SPAs struggle with: SEO (search engines need HTML on first load) and initial load performance (the server sends rendered HTML instead of an empty shell + JS bundle).
The framework supports several rendering modes, each generating HTML at a different point in the lifecycle:
| Rendering Mode | When HTML Is Generated | Best For |
|---|---|---|
| CSR (Client-Side) | In the browser after JS loads | Dashboards, internal tools (your current apps) |
| SSR (Server-Side) | On each request on the server | Dynamic content that needs SEO (e-commerce, news) |
| SSG (Static Site Gen) | At build time | Marketing pages, docs, blogs (content rarely changes) |
| ISR (Incremental Static) | At build time + revalidates periodically | Product pages, catalogs (semi-dynamic) |
When to consider Next.js: if your app needs SEO, fast initial load for public-facing pages, or you're building a content-heavy site. For internal tools and dashboards (like Dice EMS), a Vite SPA is simpler and sufficient.
- SSR and SSG both ship server-rendered HTML so crawlers and the first paint don't wait on a JS bundle; the difference is whether HTML is built per-request (SSR) or once at build time (SSG).
- ISR is the middle ground: static HTML served from cache, regenerated in the background on a revalidation interval so semi-dynamic content stays fresh without per-request cost.
- For internal dashboards a plain Vite SPA (CSR) is usually simpler and enough; reach for Next.js when SEO or public-facing first-load speed actually matters.
Interview-Ready Q&A
CSR renders in the browser after the JS bundle loads — fine for authenticated dashboards and internal tools where SEO is irrelevant. SSR renders HTML on the server for every request — best for dynamic, personalized content that still needs SEO (e-commerce, news). SSG renders HTML once at build time and serves it from a CDN — ideal for content that rarely changes (marketing, docs, blogs). ISR is SSG plus background regeneration on a revalidation interval — good for semi-dynamic content like product catalogs where you want static speed but periodic freshness.
- 1CSR = browser, SSR = per request, SSG = build time, ISR = build time + periodic revalidate.
- 2Next.js earns its complexity when SEO or public first-load performance matters; otherwise a Vite SPA is simpler.
- 3Server-rendered HTML still needs hydration before it becomes interactive.