CSR বনাম SSR বনাম SSG বনাম streaming: performance trade-off কী?

Question

IT Interview Practice · Accepted Answer

Rendering strategy নির্ধারণ করে *HTML কোথায় ও কখন* তৈরি হয়, যা loading metric চালিত করে। কোনো সর্বজনীন সেরা নেই — content কতটা dynamic ও personalized তার সাথে এটি মেলান।

## 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)** — একটি খালি 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 থেকে পরিবেশন করুন। সেরা TTFB/LCP, কিন্তু content আপনার শেষ build-এর মতোই fresh; **ISR** পর্যায়ক্রমিক/চাহিদামাফিক rebuild যোগ করে।
- **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 ভোগে। কম client JS পাঠাতে এবং সেই ফাঁক সঙ্কুচিত করতে partial/progressive hydration এবং React Server Components আছে।

## এটি কেন গুরুত্বপূর্ণ

Senior-দের প্রত্যাশা করা হয় প্রতিটি surface-এর জন্য এই trade-off নিয়ে যুক্তি করবেন, গোঁড়ামিভাবে একটি বেছে নেবেন না। তীক্ষ্ণ অন্তর্দৃষ্টি: দ্রুত paint (SSR/SSG) মানে দ্রুত interactivity নয় — hydration হলো লুকানো কর, এবং streaming + server component উভয় পাওয়ার আধুনিক উত্তর।

Content	সেরা মানানসই
Marketing, docs, blog	SSG (+ ISR)
Personalized, per-request	SSR / streaming
auth-এর পেছনে অত্যন্ত interactive app	CSR বা SSR + islands

strategy-সমূহ

বেছে নেওয়া

hydration খরচ (শেয়ার করা সাধারণ ভুল)

এটি কেন গুরুত্বপূর্ণ

সম্পর্কিত প্রশ্ন