CSR dhidi ya SSR dhidi ya SSG dhidi ya streaming: faida na hasara za performance?

Question

IT Interview Practice · Accepted Answer

Rendering strategy huamua *wapi na lini* HTML hujengwa, ambako huendesha metrics za kupakia. Hakuna bora ya kila mahali — ilinganishe na jinsi content ilivyo dynamic na personalized.

## Strategies

```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)** — tuma shell tupu + JS; browser hupakua data na kurender. Nafuu kuweka host, lakini LCP na SEO mbaya kwa sababu content husubiri JS.
- **SSR (server-side)** — render HTML kamili kwa kila request. Paint ya kwanza ya haraka, rafiki kwa SEO na daima mpya, lakini huongeza TTFB (kazi ya server kwa kila request) na bado inahitaji hydration.
- **SSG (static)** — render wakati wa build, tumikia kutoka CDN. TTFB/LCP bora zaidi, lakini content ni mpya kadri build yako ya mwisho; **ISR** huongeza rebuilds za mara kwa mara/kwa mahitaji.
- **Streaming SSR** — sukuma HTML shell mara moja na stream sehemu za polepole (React Suspense / `renderToPipeableStream`) ili watumiaji waone content huku data ikipakia.

## Kuchagua

| Content | Inayofaa zaidi |
|---------|----------|
| Marketing, docs, blog | SSG (+ ISR) |
| Personalized, kwa kila request | SSR / streaming |
| App yenye interactivity kubwa nyuma ya auth | CSR au SSR + islands |

## Gharama ya hydration (kikwazo cha pamoja)

SSR/SSG hu-paint haraka lakini ukurasa hauwi interactive hadi JS **i-hydrate** — pengo ambapo INP huteseka. Partial/progressive hydration na React Server Components zipo kutuma client JS kidogo na kupunguza pengo hilo.

## Kwa nini ni muhimu

Seniors hutarajiwa kufikiri kuhusu faida/hasara hii kwa kila surface, si kuchagua moja kwa ushabiki. Ufahamu mkali: paint ya haraka (SSR/SSG) haimaanishi interactivity ya haraka — hydration ni kodi iliyofichwa, na streaming + server components ndio jibu la kisasa la kupata zote mbili.

Content	Inayofaa zaidi
Marketing, docs, blog	SSG (+ ISR)
Personalized, kwa kila request	SSR / streaming
App yenye interactivity kubwa nyuma ya auth	CSR au SSR + islands

Strategies

Kuchagua

Gharama ya hydration (kikwazo cha pamoja)

Kwa nini ni muhimu

Maswali yanayohusiana