CSR vs. SSR vs. SSG vs. streaming: jaké jsou výkonnostní kompromisy?

Question

IT Interview Practice · Accepted Answer

Renderovací strategie rozhoduje o tom, *kde a kdy* se sestavuje HTML, což řídí metriky načítání. Neexistuje univerzálně nejlepší — přizpůsobte ji tomu, jak dynamický a personalizovaný je obsah.

## Strategie

```text
CSR      Server pošle skoro prázdné HTML + JS ──▶ prohlížeč načte data ──▶ vykreslí   (pomalý první paint)
SSR      Server vykreslí plné HTML per request ──▶ prohlížeč ho zobrazí ──▶ hydratuje  (čerstvé, náklad na TTFB)
SSG      HTML sestaveno JEDNOU při deployi ──▶ servírováno z CDN ──▶ hydratuje         (nejrychlejší, statické)
Stream   Server posílá HTML po chuncích, jak jsou hotové ──▶ nejdřív shell, data doplní (rychlé TTFB + čerstvé)
```

- **CSR (na straně klienta)** — pošli prázdný shell + JS; prohlížeč načte data a vykreslí. Levné na hosting, ale špatné LCP a SEO, protože obsah čeká na JS.
- **SSR (na straně serveru)** — vykresli plné HTML per request. Rychlý, SEO-friendly první paint a vždy čerstvé, ale přidává TTFB (práce serveru per request) a stále potřebuje hydrataci.
- **SSG (statické)** — vykresli v době buildu, servíruj z CDN. Nejlepší TTFB/LCP, ale obsah je jen tak čerstvý jako váš poslední build; **ISR** přidává periodické/on-demand přestavby.
- **Streaming SSR** — pošli HTML shell okamžitě a streamuj pomalejší části (React Suspense / `renderToPipeableStream`), takže uživatelé vidí obsah, zatímco se data načítají.

## Volba

| Obsah | Nejlepší volba |
|---------|----------|
| Marketing, dokumentace, blog | SSG (+ ISR) |
| Personalizované, per-request | SSR / streaming |
| Vysoce interaktivní aplikace za přihlášením | CSR nebo SSR + islands |

## Náklad na hydrataci (sdílené úskalí)

SSR/SSG vykreslí rychle, ale stránka není interaktivní, dokud JS **nezhydratuje** — mezera, kde trpí INP. Partial/progressive hydratace a React Server Components existují proto, aby posílaly méně klientského JS a tuto mezeru zmenšily.

## Proč je to důležité

Od seniorů se očekává, že o tomto kompromisu uvažují per plocha (surface), ne že dogmaticky vyberou jeden. Ostrý postřeh: rychlý paint (SSR/SSG) neznamená rychlou interaktivitu — hydratace je skrytá daň a streaming + server components jsou moderní odpověď, jak získat obojí.

Obsah	Nejlepší volba
Marketing, dokumentace, blog	SSG (+ ISR)
Personalizované, per-request	SSR / streaming
Vysoce interaktivní aplikace za přihlášením	CSR nebo SSR + islands

Strategie

Volba

Náklad na hydrataci (sdílené úskalí)

Proč je to důležité

Související otázky