Angular SSR (Universal) काय प्रदान करते?

Question

Accepted Answer

**Angular SSR** (ऐतिहासिकदृष्ट्या Angular Universal म्हणून ओळखले जाते) आपल्या अ‍ॅपचे 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 नंतर इव्हेंट श्रोते संलग्न करते (जलसेचन) हे परस्पर क्रिया करण्यासाठी. ## त्याची सेटअप ```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 ``` ## जलसेचन — पुन: प्रस्तुत करणे टाळणे ```ts provideClientHydration() // non-destructive hydration: reuse server HTML, don't rebuild ``` आधुनिक Angular च्या **गैर-विनाशकारी जलसेचन** सर्व्हरवर-प्रस्तुत DOM पुन्हा वापरते त्यामुळे ते फेकून देणे आणि पुन्हा प्रस्तुत करणे टाळते — फ्लिकर टाळते आणि कामगिरी सुधारते. ## संबंधित: SSG (पूर्व-प्रस्तुति) ```text SSR → render per request (dynamic content, always fresh) SSG → prerender pages at BUILD time (static, fastest) — good for content that rarely changes ``` Angular सांख्यिक सामग्रीच्या वेगवान वितरणासाठी बांधण्याच्या वेळी मार्गांचे **पूर्व-प्रस्तुति** (SSG) देखील समर्थन करते. ## सावधानीची बाब ```text ⚠️ No browser APIs on the server (window, document, localStorage) — guard with isPlatformBrowser ⚠️ More infrastructure (a Node server to run/maintain) ``` ## हे महत्वाचे का आहे सामग्री-भरपूर साइटसाठी, ई-कॉमर्स, किंवा **SEO आणि वेगवान पहिली पेंट महत्वाचे** असलेल्या कोणत्याही अ‍ॅपसाठी, केवळ क्लायंट-बाजूचे Angular SPA अपुरे आहे — शोध इंजिने आणि वापरकर्ता JS कार्यान्वित होईपर्यंत रिक्त पृष्ठ मिळवतात. SSR (जलसेचनसह) हे थेट वास्तविक HTML वितरण करून सोडवते, आणि SSG स्थिर सामग्रीसाठी पुढे जाते. SSR कधी त्याच्या अतिरिक्त जटिलतेसाठी योग्य आहे हे जाणून घेणे — आणि ब्राउজर-API सावधानीची बाब — हा मुख्य वास्तुविषयक निर्णय आहे.