CSR vs SSR vs SSG: Rendering Strategies
Where and when your HTML is generated is one of the biggest frontend architecture decisions — and a frequent interview question.
The three strategies
CSR (Client-Side Rendering) ships a shell + JS and builds the page in the browser — fast navigations, weaker first paint and SEO. SSR (Server-Side Rendering) builds HTML per request — strong SEO and first paint, higher server cost. SSG (Static Site Generation) builds HTML at deploy time — fastest and cheapest, best for content that rarely changes.
How to choose (and where Next.js fits)
Justify by user need: public, SEO-critical, dynamic pages → SSR (or React Server Components + streaming); rarely-changing content → SSG/ISR; private app-like dashboards → CSR. Next.js lets you pick per route and adds RSC and streaming for fine-grained control.
Learn rendering patterns properly
CSR, SSR, SSG, ISR, RSC and streaming — explained with when-to-use guidance in the Complete Frontend Kit's System Design Handbook.
⚡ Get the Complete Frontend Kit → ₹499Frequently asked questions
- What is hydration?
- After SSR/SSG, the server sends static HTML and React 'hydrates' it — attaching event listeners to make it interactive without recreating the DOM.
- What is ISR?
- Incremental Static Regeneration — SSG that re-generates pages in the background on a schedule, giving static speed with periodic freshness.