CSR versus SSR versus SSG versus streaming: de performance-afwegingen?

Question

IT Interview Practice · Accepted Answer

De rendering-strategie bepaalt *waar en wanneer* HTML wordt gebouwd, wat de laadmetrics aandrijft. Er is geen universele beste — stem hem af op hoe dynamisch en gepersonaliseerd de inhoud is.

## De strategieën

```text
CSR      Server stuurt bijna-lege HTML + JS ──▶ browser haalt data op ──▶ rendert   (trage eerste paint)
SSR      Server rendert volledige HTML per request ──▶ browser toont het ──▶ hydrateert   (vers, TTFB-kosten)
SSG      HTML ÉÉN keer gebouwd bij deploy ──▶ geserveerd vanaf CDN ──▶ hydrateert               (snelst, statisch)
Stream   Server flusht HTML in chunks zodra klaar ──▶ eerst de shell, data vult in    (snelle TTFB + vers)
```

- **CSR (client-side)** — verstuur een lege shell + JS; de browser haalt data op en rendert. Goedkoop om te hosten, maar slechte LCP en SEO omdat inhoud op JS wacht.
- **SSR (server-side)** — render volledige HTML per request. Snelle, SEO-vriendelijke eerste paint en altijd vers, maar voegt TTFB toe (serverwerk per request) en heeft nog steeds hydratie nodig.
- **SSG (statisch)** — render bij build-tijd, serveer vanaf een CDN. Beste TTFB/LCP, maar inhoud is slechts zo vers als je laatste build; **ISR** voegt periodieke/on-demand herbouws toe.
- **Streaming SSR** — flush de HTML-shell onmiddellijk en stream tragere delen (React Suspense / `renderToPipeableStream`) zodat gebruikers inhoud zien terwijl data laadt.

## Kiezen

| Inhoud | Beste keuze |
|---------|-------------|
| Marketing, docs, blog | SSG (+ ISR) |
| Gepersonaliseerd, per request | SSR / streaming |
| Zeer interactieve app achter auth | CSR of SSR + islands |

## De hydratiekosten (gedeelde valkuil)

SSR/SSG schilderen snel, maar de pagina is niet interactief totdat JS **hydrateert** — een gat waarin INP lijdt. Partiële/progressieve hydratie en React Server Components bestaan om minder client-JS te versturen en dat gat te verkleinen.

## Waarom het belangrijk is

Van seniors wordt verwacht dat ze deze afweging per surface beredeneren, niet dogmatisch één kiezen. Het scherpe inzicht: snelle paint (SSR/SSG) betekent niet snelle interactiviteit — hydratie is de verborgen belasting, en streaming + server components zijn het moderne antwoord om beide te krijgen.

Inhoud	Beste keuze
Marketing, docs, blog	SSG (+ ISR)
Gepersonaliseerd, per request	SSR / streaming
Zeer interactieve app achter auth	CSR of SSR + islands

De strategieën

Kiezen

De hydratiekosten (gedeelde valkuil)

Waarom het belangrijk is

Gerelateerde vragen