CSR kontra SSR kontra SSG kontra streaming: prestandaavvägningarna?

Question

IT Interview Practice · Accepted Answer

Renderingsstrategin avgör *var och när* HTML byggs, vilket styr laddningsmåtten. Det finns ingen universellt bästa — matcha den mot hur dynamiskt och personaliserat innehållet är.

## Strategierna

```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)** — skicka ett tomt skal + JS; webbläsaren hämtar data och renderar. Billigt att hosta, men dålig LCP och SEO eftersom innehåll väntar på JS.
- **SSR (server-side)** — rendera full HTML per request. Snabb, SEO-vänlig första målning och alltid färsk, men lägger till TTFB (serverarbete per request) och behöver fortfarande hydrering.
- **SSG (statiskt)** — rendera vid byggtid, servera från ett CDN. Bäst TTFB/LCP, men innehållet är bara så färskt som ditt senaste bygge; **ISR** lägger till periodiska/on-demand ombyggen.
- **Streaming SSR** — skicka HTML-skalet omedelbart och strömma långsammare delar (React Suspense / `renderToPipeableStream`) så att användare ser innehåll medan data laddas.

## Att välja

| Innehåll | Bäst lämpat |
|---------|----------|
| Marknadsföring, docs, blogg | SSG (+ ISR) |
| Personaliserat, per request | SSR / streaming |
| Mycket interaktiv app bakom auth | CSR eller SSR + islands |

## Hydreringskostnaden (gemensam fallgrop)

SSR/SSG målar snabbt men sidan är inte interaktiv förrän JS **hydrerar** — en lucka där INP lider. Partiell/progressiv hydrering och React Server Components finns för att skicka mindre klient-JS och krympa den luckan.

## Varför det är viktigt

Seniorer förväntas resonera om denna avvägning per yta, inte dogmatiskt välja en. Den skarpa insikten: snabb målning (SSR/SSG) betyder inte snabb interaktivitet — hydrering är den dolda skatten, och streaming + server components är det moderna svaret på att få båda.

Innehåll	Bäst lämpat
Marknadsföring, docs, blogg	SSG (+ ISR)
Personaliserat, per request	SSR / streaming
Mycket interaktiv app bakom auth	CSR eller SSR + islands

Strategierna

Att välja

Hydreringskostnaden (gemensam fallgrop)

Varför det är viktigt

Relaterade frågor