Angular SSR (Universal) کیا فراہم کرتا ہے؟

Question

Accepted Answer

**Angular SSR** (تاریخی طور پر Angular Universal کہا جاتا ہے) آپ کی app کا HTML **سرور پر** ابتدائی درخواست کے لیے رینڈر کرتا ہے، بجائے اس کے کہ ایک خالی صفحہ بھیجا جائے جو براؤزر کو JavaScript سے بھرنا ہوگا۔ یہ SEO، محسوس کردہ کارکردگی، اور پہلی پینٹ کو بہتر بناتا ہے۔ ## مسئلہ جو SSR حل کرتا ہے ```text Client-side rendering (default SPA): Server sends empty + JS bundle → browser downloads & runs Angular → THEN content appears → slow first paint; crawlers/social bots may see a blank page Server-side rendering: Server runs Angular, sends fully-rendered HTML → content visible immediately → Angular "hydrates" it for interactivity ``` SSR کے ساتھ، سرور مکمل HTML تیار کرتا ہے تاکہ صارفین اور سرچ انجن کو فوری طور پر حقیقی مواد مل جائے؛ Angular پھر ایونٹ لسننرز کو منسلک کرتا ہے (hydration) تاکہ یہ انٹرایکٹو بن جائے۔ ## اسے سیٹ اپ کرنا ```bash ng add @angular/ssr # adds server rendering to an existing app ``` یہ Node/Express سرور کو سیٹ اپ کرتا ہے جو سرور پر Angular کو رینڈر کرتا ہے اور پہلے سے رینڈر شدہ HTML فراہم کرتا ہے۔ ## SSR کیا فراہم کرتا ہے ```text ✓ Better SEO — crawlers get full content (critical for content/marketing sites) ✓ Faster First Contentful Paint — visible content before JS loads ✓ Better social sharing — link previews see real meta tags/content ✓ Improved performance on slow devices/networks ``` ## Hydration — دوبارہ رینڈر کرنے سے بچنا ```ts provideClientHydration() // non-destructive hydration: reuse server HTML, don't rebuild ``` جدید Angular کا **غیر تخریب کرنے والا hydration** سرور سے رینڈر شدہ DOM کو دوبارہ استعمال کرتا ہے بجائے اس کے کہ اسے پھینک دیا جائے اور دوبارہ رینڈر کیا جائے — flicker سے بچتے ہوئے اور کارکردگی کو بہتر بناتے ہوئے۔ ## متعلقہ: SSG (prerendering) ```text SSR → render per request (dynamic content, always fresh) SSG → prerender pages at BUILD time (static, fastest) — good for content that rarely changes ``` Angular مختلف routes کو build کے وقت **prerender** کرنے کی بھی معاونت کرتا ہے (SSG) static مواد کی تیز ترین ممکنہ ترسیل کے لیے۔ ## انتباہات ```text ⚠️ No browser APIs on the server (window, document, localStorage) — guard with isPlatformBrowser ⚠️ More infrastructure (a Node server to run/maintain) ``` ## اہمیت کیوں ہے مواد سے بھرپور سائٹس، e-commerce، یا کسی بھی app کے لیے جہاں **SEO اور تیز پہلی پینٹ اہم ہے**، client-only Angular SPA ناکافی ہے — سرچ انجنز اور صارفین کو خالی صفحہ ملتا ہے جب تک JS چلتا ہے۔ SSR (hydration کے ساتھ) یہ مسئلہ حل کرتا ہے حقیقی HTML پہلے سے فراہم کر کے، اور SSG static مواد کے لیے مزید آگے جاتا ہے۔ یہ جاننا کہ کب SSR اس کی شامل پیچیدگی کے قابل ہے — اور browser API کی انتباہات — اہم تعمیری فیصلہ ہے۔