CSR वि. SSR वि. SSG वि. streaming: performance trade-offs काय आहेत?

Question

IT Interview Practice · Accepted Answer

rendering strategy *कुठे आणि केव्हा* HTML बांधले जाते हे ठरवते, जे loading metrics ला चालना देते. एकही सार्वत्रिक सर्वोत्तम नाही — content किती dynamic आणि 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)** — रिकामा shell + JS पाठवा; browser data fetch करून render करते. host करायला स्वस्त, पण खराब LCP आणि SEO कारण content JS वर वाट पाहते.
- **SSR (server-side)** — प्रति request संपूर्ण HTML render करा. जलद, SEO-अनुकूल first paint आणि नेहमी fresh, पण TTFB जोडते (प्रति request server काम) आणि तरीही hydration लागते.
- **SSG (static)** — build time ला render करा, CDN वरून serve करा. सर्वोत्तम TTFB/LCP, पण content तुमच्या शेवटच्या build इतकीच fresh असते; **ISR** नियतकालिक/मागणीनुसार 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 खर्च (सामायिक अडचण)

SSR/SSG जलद paint करतात पण JS **hydrate** होईपर्यंत page interactive नसते — एक अंतर जिथे INP भोगावे लागते. Partial/progressive hydration आणि React Server Components कमी client JS पाठवण्यासाठी आणि ते अंतर लहान करण्यासाठी अस्तित्वात आहेत.

## हे का महत्त्वाचे आहे

Seniors कडून अपेक्षा असते की ते हा trade-off प्रति surface विचारपूर्वक करतील, हट्टाने एक निवडणार नाहीत. तीक्ष्ण अंतर्दृष्टी: जलद 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

Strategies

निवडणे

Hydration खर्च (सामायिक अडचण)

हे का महत्त्वाचे आहे

संबंधित प्रश्न