CSR vs SSR vs SSG vs streaming: il-kompromessi tal-performance?

Question

IT Interview Practice · Accepted Answer

L-istrateġija tar-render tiddeċiedi *fejn u meta* jinbena l-HTML, li jmexxi l-metrics tat-tagħbija. M'hemmx l-aħjar universali — qabbilha ma' kemm il-kontenut huwa dinamiku u personalizzat.

## L-istrateġiji

```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)** — ibgħat shell vojt + JS; il-browser iġib id-data u jirrenderja. Irħis biex tospita, imma LCP u SEO fqar għax il-kontenut jistenna l-JS.
- **SSR (server-side)** — irrenderja HTML sħiħ għal kull request. Ewwel paint mgħaġġel u faċli għas-SEO u dejjem frisk, imma jżid it-TTFB (xogħol tas-server għal kull request) u xorta jeħtieġ hydration.
- **SSG (statiku)** — irrenderja waqt il-build, servi minn CDN. L-aħjar TTFB/LCP, imma l-kontenut huwa frisk daqs l-aħħar build tiegħek biss; **ISR** iżid rebuilds perjodiċi/fuq talba.
- **Streaming SSR** — oħroġ l-HTML shell immedjatament u agħmel stream tal-partijiet aktar bil-mod (React Suspense / `renderToPipeableStream`) biex l-utenti jaraw kontenut waqt li d-data titgħabba.

## Kif tagħżel

| Kontenut | L-aħjar għażla |
|---------|----------|
| Marketing, docs, blog | SSG (+ ISR) |
| Personalizzat, għal kull request | SSR / streaming |
| App interattiva ħafna wara awtentikazzjoni | CSR jew SSR + islands |

## L-ispiża tal-hydration (nassa komuni)

SSR/SSG jpittru malajr imma l-paġna mhijiex interattiva sakemm il-JS **jagħmel hydrate** — distakk fejn l-INP ibati. Partial/progressive hydration u React Server Components jeżistu biex jibagħtu inqas JS tal-klijent u jnaqqsu dak id-distakk.

## Għaliex huwa importanti

Mis-seniors huwa mistenni li jirraġunaw dwar dan il-kompromess għal kull superfiċje, mhux jagħżlu waħda b'mod dommatiku. L-għarfien qawwi: paint mgħaġġel (SSR/SSG) ma jfissirx interattività mgħaġġla — l-hydration hija t-taxxa moħbija, u streaming + server components huma t-tweġiba moderna biex tikseb it-tnejn.

Kontenut	L-aħjar għażla
Marketing, docs, blog	SSG (+ ISR)
Personalizzat, għal kull request	SSR / streaming
App interattiva ħafna wara awtentikazzjoni	CSR jew SSR + islands

L-istrateġiji

Kif tagħżel

L-ispiża tal-hydration (nassa komuni)

Għaliex huwa importanti

Mistoqsijiet relatati