CSR vs SSR vs SSG vs streaming: performance trade-off లు ఏమిటి?

Question

IT Interview Practice · Accepted Answer

Rendering strategy HTML *ఎక్కడ మరియు ఎప్పుడు* నిర్మించబడుతుందో నిర్ణయిస్తుంది, ఇది loading metric లను నడిపిస్తుంది. సార్వత్రిక ఉత్తమమైనది లేదు — content ఎంత dynamic మరియు personalized అనేదానికి దాన్ని match చేయండి.

## Strategy లు

```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)** — ఒక empty shell + JS ను ship చేయండి; browser data ను fetch చేసి render చేస్తుంది. Host చేయడానికి చవక, కానీ పేలవమైన LCP మరియు SEO ఎందుకంటే content JS పై వేచి ఉంటుంది.
- **SSR (server-side)** — request కు పూర్తి HTML ను render చేయండి. వేగవంతమైన, SEO-friendly first paint మరియు ఎల్లప్పుడూ fresh, కానీ TTFB (request కు server పని) ను జోడిస్తుంది మరియు ఇంకా hydration అవసరం.
- **SSG (static)** — build time వద్ద render చేయండి, CDN నుండి serve చేయండి. ఉత్తమ TTFB/LCP, కానీ content మీ చివరి build అంత మాత్రమే fresh; **ISR** periodic/on-demand rebuild లను జోడిస్తుంది.
- **Streaming SSR** — HTML shell ను తక్షణమే flush చేసి నెమ్మదైన భాగాలను stream చేయండి (React Suspense / `renderToPipeableStream`) కాబట్టి data load అవుతున్నప్పుడు user లు content ను చూస్తారు.

## ఎంచుకోవడం

| Content | ఉత్తమ fit |
|---------|----------|
| Marketing, docs, blog | SSG (+ ISR) |
| Personalized, per-request | SSR / streaming |
| Auth వెనుక అత్యంత interactive app | CSR లేదా SSR + islands |

## Hydration cost (భాగస్వామ్య లోపం)

SSR/SSG వేగంగా paint అవుతాయి కానీ JS **hydrate** అయ్యే వరకు page interactive కాదు — INP బాధపడే ఒక gap. Partial/progressive hydration మరియు React Server Components తక్కువ client JS ను ship చేసి ఆ gap ను తగ్గించడానికి ఉన్నాయి.

## ఇది ఎందుకు ముఖ్యం

Senior లు ఒకదాన్ని పిడివాదంగా ఎంచుకోకుండా, surface కు ఈ trade-off గురించి తర్కించాలని ఆశించబడతారు. కీలక అంతర్దృష్టి: వేగవంతమైన paint (SSR/SSG) అంటే వేగవంతమైన interactivity కాదు — hydration అనేది దాచిన పన్ను, మరియు streaming + server components రెండింటినీ పొందడానికి ఆధునిక సమాధానం.

Content	ఉత్తమ fit
Marketing, docs, blog	SSG (+ ISR)
Personalized, per-request	SSR / streaming
Auth వెనుక అత్యంత interactive app	CSR లేదా SSR + islands

Strategy లు

ఎంచుకోవడం

Hydration cost (భాగస్వామ్య లోపం)

ఇది ఎందుకు ముఖ్యం

సంబంధిత ప్రశ్నలు