CSR vs SSR vs SSG vs streaming: našumo kompromisai?

Question

IT Interview Practice · Accepted Answer

Atvaizdavimo strategija nusprendžia, *kur ir kada* HTML sukuriamas, o tai lemia įkėlimo metrikas. Universalaus geriausio nėra — priderinkite jį prie to, kiek turinys dinamiškas ir personalizuotas.

## Strategijos

```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)** — siųskite tuščią shell + JS; naršyklė atsisiunčia duomenis ir atvaizduoja. Pigu talpinti, bet prastas LCP ir SEO, nes turinys laukia JS.
- **SSR (server-side)** — atvaizduokite visą HTML kiekvienai užklausai. Greitas, SEO draugiškas pirmasis paint ir visada šviežias, bet prideda TTFB (serverio darbas kiekvienai užklausai) ir vis tiek reikia hidratacijos.
- **SSG (static)** — atvaizduokite build metu, tiekite iš CDN. Geriausias TTFB/LCP, bet turinys toks šviežias, kaip jūsų paskutinis build; **ISR** prideda periodinius/pagal poreikį perstatymus.
- **Streaming SSR** — iškart išpilkite HTML shell ir srautu siųskite lėtesnes dalis (React Suspense / `renderToPipeableStream`), kad naudotojai matytų turinį, kol įsikelia duomenys.

## Pasirinkimas

| Turinys | Geriausiai tinka |
|---------|----------|
| Marketingas, dokumentacija, blogas | SSG (+ ISR) |
| Personalizuotas, kiekvienai užklausai | SSR / streaming |
| Labai interaktyvi programa už autentifikacijos | CSR arba SSR + islands |

## Hidratacijos kaina (bendras spąstas)

SSR/SSG greitai piešia, bet puslapis netampa interaktyvus, kol JS **hidratuoja** — tarpas, kuriame kenčia INP. Dalinė/progresyvi hidratacija ir React Server Components egzistuoja, kad siųstų mažiau kliento JS ir sumažintų tą tarpą.

## Kodėl tai svarbu

Iš senior tikimasi, kad samprotautų apie šį kompromisą kiekvienam paviršiui, o ne dogmatiškai rinktųsi vieną. Aštrus įžvalgumas: greitas paint (SSR/SSG) nereiškia greito interaktyvumo — hidratacija yra paslėptas mokestis, o streaming + server components yra šiuolaikinis atsakymas, kaip gauti abu.

Turinys	Geriausiai tinka
Marketingas, dokumentacija, blogas	SSG (+ ISR)
Personalizuotas, kiekvienai užklausai	SSR / streaming
Labai interaktyvi programa už autentifikacijos	CSR arba SSR + islands

Strategijos

Pasirinkimas

Hidratacijos kaina (bendras spąstas)

Kodėl tai svarbu

Susiję klausimai