CSR vs. SSR vs. SSG vs. streaming: suorituskykykompromissit?

Question

IT Interview Practice · Accepted Answer

Renderöintistrategia päättää, *missä ja milloin* HTML rakennetaan, mikä ohjaa latausmittareita. Universaalia parasta ei ole — sovita se siihen, kuinka dynaamista ja personoitua sisältö on.

## Strategiat

```text
CSR      Palvelin lähettää lähes tyhjän HTML:n + JS ──▶ selain hakee datan ──▶ renderöi   (hidas ensimaalaus)
SSR      Palvelin renderöi täyden HTML:n per pyyntö ──▶ selain näyttää sen ──▶ hydratoi   (tuore, TTFB-kustannus)
SSG      HTML rakennettu KERRAN julkaisussa ──▶ tarjoillaan CDN:stä ──▶ hydratoi          (nopein, staattinen)
Stream   Palvelin huuhtoo HTML:n paloina valmistuessa ──▶ kuori ensin, data täyttyy       (nopea TTFB + tuore)
```

- **CSR (client-side)** — toimita tyhjä kuori + JS; selain hakee datan ja renderöi. Halpa ylläpitää, mutta huono LCP ja SEO, koska sisältö odottaa JS:ää.
- **SSR (server-side)** — renderöi täysi HTML per pyyntö. Nopea, SEO-ystävällinen ensimaalaus ja aina tuore, mutta lisää TTFB:tä (palvelintyö per pyyntö) ja tarvitsee yhä hydraation.
- **SSG (staattinen)** — renderöi rakennusaikana, tarjoile CDN:stä. Paras TTFB/LCP, mutta sisältö on vain niin tuoretta kuin viimeisin rakennuksesi; **ISR** lisää säännölliset/tarvittaessa tapahtuvat uudelleenrakennukset.
- **Streaming SSR** — huuhtoo HTML-kuoren välittömästi ja striimaa hitaammat osat (React Suspense / `renderToPipeableStream`), jotta käyttäjät näkevät sisältöä datan latautuessa.

## Valinta

| Sisältö | Paras sovitus |
|---------|----------|
| Markkinointi, dokumentaatio, blogi | SSG (+ ISR) |
| Personoitu, per pyyntö | SSR / streaming |
| Erittäin interaktiivinen sovellus autentikoinnin takana | CSR tai SSR + islands |

## Hydraatiokustannus (jaettu sudenkuoppa)

SSR/SSG maalaavat nopeasti, mutta sivu ei ole interaktiivinen ennen kuin JS **hydratoi** — aukko, jossa INP kärsii. Osittainen/progressiivinen hydraatio ja React Server Components ovat olemassa toimittaakseen vähemmän client-JS:ää ja kutistaakseen tuon aukon.

## Miksi se on tärkeää

Seniorien odotetaan pohtivan tätä kompromissia per pinta, ei dogmaattisesti valitsevan yhtä. Terävä oivallus: nopea maalaus (SSR/SSG) ei tarkoita nopeaa interaktiivisuutta — hydraatio on piilotettu vero, ja streaming + server components ovat moderni vastaus molempien saamiseen.

Sisältö	Paras sovitus
Markkinointi, dokumentaatio, blogi	SSG (+ ISR)
Personoitu, per pyyntö	SSR / streaming
Erittäin interaktiivinen sovellus autentikoinnin takana	CSR tai SSR + islands

Strategiat

Valinta

Hydraatiokustannus (jaettu sudenkuoppa)

Miksi se on tärkeää

Aiheeseen liittyvät kysymykset