CSR vs SSR vs SSG vs streaming: a teljesítménybeli kompromisszumok?

Question

IT Interview Practice · Accepted Answer

A renderelési stratégia dönti el, *hol és mikor* épül fel a HTML, ami meghatározza a betöltési metrikákat. Nincs univerzálisan legjobb — igazítsd ahhoz, mennyire dinamikus és személyre szabott a tartalom.

## A stratégiák

```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 (kliensoldali)** — egy üres shellt + JS-t szállítasz; a böngésző letölti az adatokat és renderel. Olcsó hostolni, de gyenge LCP és SEO, mert a tartalom a JS-re vár.
- **SSR (szerveroldali)** — kérésenként teljes HTML-t renderel. Gyors, SEO-barát első paint, és mindig friss, de növeli a TTFB-t (szerver-munka kérésenként), és még mindig szükséges a hidratálás.
- **SSG (statikus)** — build időben renderel, CDN-ről szolgál ki. A legjobb TTFB/LCP, de a tartalom csak annyira friss, mint az utolsó buildad; az **ISR** periodikus/igény szerinti újraépítést ad hozzá.
- **Streaming SSR** — azonnal kiküldi a HTML shellt, és streameli a lassabb részeket (React Suspense / `renderToPipeableStream`), hogy a felhasználók lássák a tartalmat, miközben az adatok betöltődnek.

## Választás

| Tartalom | Legjobb választás |
|---------|----------|
| Marketing, dokumentáció, blog | SSG (+ ISR) |
| Személyre szabott, kérésenkénti | SSR / streaming |
| Erősen interaktív, auth mögötti app | CSR vagy SSR + islands |

## A hidratálás költsége (közös buktató)

Az SSR/SSG gyorsan paintel, de az oldal nem interaktív, amíg a JS nem **hidratál** — ez egy rés, ahol az INP szenved. A részleges/progresszív hidratálás és a React Server Components azért léteznek, hogy kevesebb kliensoldali JS-t szállítsanak, és csökkentsék ezt a rést.

## Miért fontos

A senioroktól elvárt, hogy felületenként mérlegeljék ezt a kompromisszumot, ne dogmatikusan válasszanak egyet. Az éles felismerés: a gyors paint (SSR/SSG) nem jelent gyors interaktivitást — a hidratálás a rejtett adó, és a streaming + server components a modern válasz arra, hogy mindkettőt megkapd.

Tartalom	Legjobb választás
Marketing, dokumentáció, blog	SSG (+ ISR)
Személyre szabott, kérésenkénti	SSR / streaming
Erősen interaktív, auth mögötti app	CSR vagy SSR + islands

A stratégiák

Választás

A hidratálás költsége (közös buktató)

Miért fontos

Kapcsolódó kérdések