CSR vs SSR vs SSG vs streaming: the performance trade-offs?

Question

IT Interview Practice · Accepted Answer

The rendering strategy decides *where and when* HTML is built, which drives the loading metrics. There's no universal best — match it to how dynamic and personalized the content is.

## The strategies

```text
CSR      Server sends near-empty HTML + JS ──▶ browser fetches data ──▶ renders   (slow first paint)
SSR      Server renders full HTML per request ──▶ browser shows it ──▶ hydrates   (fresh, TTFB cost)
SSG      HTML built ONCE at deploy ──▶ served from CDN ──▶ hydrates               (fastest, static)
Stream   Server flushes HTML in chunks as ready ──▶ shell first, data fills in    (fast TTFB + fresh)
```

- **CSR (client-side)** — ship an empty shell + JS; the browser fetches data and renders. Cheap to host, but poor LCP and SEO because content waits on JS.
- **SSR (server-side)** — render full HTML per request. Fast, SEO-friendly first paint and always fresh, but adds TTFB (server work per request) and still needs hydration.
- **SSG (static)** — render at build time, serve from a CDN. Best TTFB/LCP, but content is only as fresh as your last build; **ISR** adds periodic/on-demand rebuilds.
- **Streaming SSR** — flush the HTML shell immediately and stream slower parts (React Suspense / `renderToPipeableStream`) so users see content while data loads.

## Choosing

| Content | Best fit |
|---------|----------|
| Marketing, docs, blog | SSG (+ ISR) |
| Personalized, per-request | SSR / streaming |
| Highly interactive app behind auth | CSR or SSR + islands |

## The hydration cost (shared pitfall)

SSR/SSG paint fast but the page isn't interactive until JS **hydrates** — a gap where INP suffers. Partial/progressive hydration and React Server Components exist to ship less client JS and shrink that gap.

## Why it matters

Seniors are expected to reason about this trade-off per surface, not dogmatically pick one. The sharp insight: fast paint (SSR/SSG) doesn't mean fast interactivity — hydration is the hidden tax, and streaming + server components are the modern answer to getting both.

Content	Best fit
Marketing, docs, blog	SSG (+ ISR)
Personalized, per-request	SSR / streaming
Highly interactive app behind auth	CSR or SSR + islands

The strategies

Choosing

The hydration cost (shared pitfall)

Why it matters

Related questions