Questions › Browser

CSR vs SSR vs SSG & hydration

Rendering StrategyHardBrowser

Compare client-side rendering, server-side rendering, and static generation. What is hydration, and what trade-offs drive the choice?

What it tests

Whether you can reason about TTFB/FCP/TTI, SEO, and server cost across strategies.

Approach & answer

CSR (client-side rendering): the server sends a near-empty HTML shell + a JS bundle; the browser fetches data and builds the DOM. Fast TTFB but slow first paint (blank until JS loads/runs), weaker SEO for crawlers that don't execute JS, and heavy client work — a classic SPA. SSR (server-side rendering): the server renders full HTML per request, so the user sees content fast (good FCP) and crawlers get real markup; costs are higher server load and TTFB, plus the page isn't interactive until HYDRATION completes. SSG (static generation): HTML is rendered at BUILD time and served from a CDN — fastest and cheapest, ideal for content that rarely changes (docs, blogs, marketing); the downside is stale data and rebuilds, softened by ISR (incremental static regeneration) which re-renders pages on a schedule/on-demand. HYDRATION is the step where the client-side framework attaches event listeners and reconciles state onto server-rendered HTML to make it interactive; between paint and hydration the page LOOKS ready but doesn't respond (a UX gap), and shipping the JS to hydrate can be costly — hence newer approaches: partial/progressive hydration, islands architecture (hydrate only interactive widgets), streaming SSR, and React Server Components (send rendered output, not component JS). Choose by need: static marketing → SSG; SEO + dynamic data → SSR/ISR; highly interactive app behind a login → CSR (SEO doesn't matter).

Use this technique when

Choosing a rendering strategy / framework mode: weigh SEO, time-to-content, interactivity, and server cost.

Code

             TTFB   First paint   SEO      Server cost   Data freshness
CSR (SPA)    fast   slow (blank)  weak     low           live
SSR          slower fast          strong   high          live (per request)
SSG          fast   fast          strong   lowest (CDN)  stale (build-time; ISR helps)

Hydration = attach JS listeners onto server HTML → interactive.
Gap: page LOOKS ready but ignores clicks until hydration finishes.
Fixes: islands / partial & progressive hydration, streaming SSR, Server Components.

References