CSR kundrejt SSR kundrejt SSG kundrejt streaming: cilat janë kompromiset e performancës?

Question

IT Interview Practice · Accepted Answer

Strategjia e renderimit vendos *ku dhe kur* ndërtohet HTML-i, që drejton metrikat e ngarkimit. Nuk ka një më të mirë universale — përputheni me sa dinamike dhe e personalizuar është përmbajtja.

## Strategjitë

```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)** — dërgo një shell bosh + JS; browser-i merr të dhënat dhe renderon. E lirë për t'u host-uar, por LCP dhe SEO të dobët sepse përmbajtja pret JS-in.
- **SSR (server-side)** — rendero HTML të plotë për çdo kërkesë. Paint i parë i shpejtë, SEO-friendly dhe gjithmonë i freskët, por shton TTFB (punë serveri për kërkesë) dhe ende kërkon hydration.
- **SSG (static)** — rendero gjatë build-it, shërbe nga një CDN. TTFB/LCP më i mirë, por përmbajtja është aq e freskët sa build-i juaj i fundit; **ISR** shton rindërtime periodike/sipas nevojës.
- **Streaming SSR** — flush-o shell-in HTML menjëherë dhe stream-o pjesët më të ngadalta (React Suspense / `renderToPipeableStream`) që përdoruesit të shohin përmbajtje ndërsa të dhënat ngarkohen.

## Zgjedhja

| Përmbajtja | Përshtatja më e mirë |
|---------|----------|
| Marketing, docs, blog | SSG (+ ISR) |
| E personalizuar, për-kërkesë | SSR / streaming |
| App shumë interaktiv pas auth | CSR ose SSR + islands |

## Kostoja e hydration-it (kurthi i përbashkët)

SSR/SSG bëjnë paint shpejt por faqja nuk është interaktive derisa JS të bëjë **hydrate** — një hendek ku INP vuan. Partial/progressive hydration dhe React Server Components ekzistojnë për të dërguar më pak JS klienti dhe për ta ngushtuar atë hendek.

## Pse ka rëndësi

Senior-ët pritet të arsyetojnë mbi këtë kompromis për çdo sipërfaqe, jo të zgjedhin një dogmatikisht. Vështrimi i mprehtë: paint i shpejtë (SSR/SSG) nuk do të thotë interaktivitet i shpejtë — hydration-i është taksa e fshehur, dhe streaming + server components janë përgjigja moderne për të marrë të dyja.

Përmbajtja	Përshtatja më e mirë
Marketing, docs, blog	SSG (+ ISR)
E personalizuar, për-kërkesë	SSR / streaming
App shumë interaktiv pas auth	CSR ose SSR + islands

Strategjitë

Zgjedhja

Kostoja e hydration-it (kurthi i përbashkët)

Pse ka rëndësi

Pyetje të ngjashme