CSR ਬਨਾਮ SSR ਬਨਾਮ SSG ਬਨਾਮ streaming: performance trade-offs ਕੀ ਹਨ?

Question

IT Interview Practice · Accepted Answer

rendering strategy ਤੈਅ ਕਰਦੀ ਹੈ ਕਿ HTML *ਕਿੱਥੇ ਅਤੇ ਕਦੋਂ* ਬਣਦਾ ਹੈ, ਜੋ loading metrics ਨੂੰ ਚਲਾਉਂਦਾ ਹੈ। ਕੋਈ universal ਸਭ ਤੋਂ ਵਧੀਆ ਨਹੀਂ ਹੈ — ਇਸਨੂੰ ਇਸ ਨਾਲ ਮੇਲ ਕਰੋ ਕਿ content ਕਿੰਨਾ dynamic ਅਤੇ personalized ਹੈ।

## ਰਣਨੀਤੀਆਂ

```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)** — ਇੱਕ ਖ਼ਾਲੀ shell + JS ਭੇਜੋ; browser data fetch ਕਰਕੇ render ਕਰਦਾ ਹੈ। host ਕਰਨ ਲਈ ਸਸਤਾ, ਪਰ ਮਾੜਾ LCP ਅਤੇ SEO ਕਿਉਂਕਿ content JS 'ਤੇ ਉਡੀਕਦਾ ਹੈ।
- **SSR (server-side)** — ਪ੍ਰਤੀ request ਪੂਰਾ HTML render ਕਰੋ। ਤੇਜ਼, SEO-friendly ਪਹਿਲਾ paint ਅਤੇ ਹਮੇਸ਼ਾ fresh, ਪਰ TTFB ਜੋੜਦਾ ਹੈ (ਪ੍ਰਤੀ request server work) ਅਤੇ ਹਾਲੇ ਵੀ hydration ਦੀ ਲੋੜ।
- **SSG (static)** — build time 'ਤੇ render ਕਰੋ, CDN ਤੋਂ serve ਕਰੋ। ਸਭ ਤੋਂ ਵਧੀਆ TTFB/LCP, ਪਰ content ਸਿਰਫ਼ ਤੁਹਾਡੇ ਆਖ਼ਰੀ build ਜਿੰਨਾ fresh ਹੈ; **ISR** periodic/on-demand rebuilds ਜੋੜਦਾ ਹੈ।
- **Streaming SSR** — HTML shell ਤੁਰੰਤ flush ਕਰੋ ਅਤੇ ਹੌਲੀ ਹਿੱਸੇ stream ਕਰੋ (React Suspense / `renderToPipeableStream`) ਤਾਂ ਜੋ data load ਹੁੰਦੇ ਹੋਏ ਉਪਭੋਗਤਾ content ਦੇਖਣ।

## ਚੁਣਨਾ

| Content | ਸਭ ਤੋਂ ਢੁਕਵਾਂ |
|---------|----------|
| Marketing, docs, blog | SSG (+ ISR) |
| Personalized, per-request | SSR / streaming |
| auth ਪਿੱਛੇ ਬਹੁਤ interactive app | CSR ਜਾਂ SSR + islands |

## hydration cost (ਸਾਂਝਾ pitfall)

SSR/SSG ਤੇਜ਼ੀ ਨਾਲ paint ਕਰਦੇ ਹਨ ਪਰ page ਉਦੋਂ ਤੱਕ interactive ਨਹੀਂ ਹੁੰਦਾ ਜਦੋਂ ਤੱਕ JS **hydrate** ਨਹੀਂ ਹੁੰਦਾ — ਇੱਕ ਵਕਫ਼ਾ ਜਿੱਥੇ INP ਖ਼ਰਾਬ ਹੁੰਦਾ ਹੈ। Partial/progressive hydration ਅਤੇ React Server Components ਘੱਟ client JS ਭੇਜਣ ਅਤੇ ਉਸ ਵਕਫ਼ੇ ਨੂੰ ਘਟਾਉਣ ਲਈ ਮੌਜੂਦ ਹਨ।

## ਇਹ ਮਹੱਤਵਪੂਰਨ ਕਿਉਂ ਹੈ

Seniors ਤੋਂ ਉਮੀਦ ਕੀਤੀ ਜਾਂਦੀ ਹੈ ਕਿ ਉਹ ਪ੍ਰਤੀ surface ਇਸ trade-off ਬਾਰੇ ਤਰਕ ਕਰਨ, ਨਾ ਕਿ hਠਧਰਮੀ ਨਾਲ ਇੱਕ ਚੁਣਨ। ਤਿੱਖੀ ਸੂਝ: ਤੇਜ਼ paint (SSR/SSG) ਦਾ ਮਤਲਬ ਤੇਜ਼ interactivity ਨਹੀਂ — hydration ਲੁਕਿਆ ਹੋਇਆ ਟੈਕਸ ਹੈ, ਅਤੇ streaming + server components ਦੋਵੇਂ ਪ੍ਰਾਪਤ ਕਰਨ ਦਾ ਆਧੁਨਿਕ ਜਵਾਬ ਹਨ।

Content	ਸਭ ਤੋਂ ਢੁਕਵਾਂ
Marketing, docs, blog	SSG (+ ISR)
Personalized, per-request	SSR / streaming
auth ਪਿੱਛੇ ਬਹੁਤ interactive app	CSR ਜਾਂ SSR + islands

ਰਣਨੀਤੀਆਂ

ਚੁਣਨਾ

hydration cost (ਸਾਂਝਾ pitfall)

ਇਹ ਮਹੱਤਵਪੂਰਨ ਕਿਉਂ ਹੈ

ਸੰਬੰਧਿਤ ਸਵਾਲ