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

Question

Accepted Answer

**Angular SSR** (ऐतिहासिक रूप से Angular Universal कहा जाता है) आपके ऐप के HTML को **सर्वर पर** प्रारंभिक अनुरोध के लिए प्रस्तुत करता है, जो एक खाली पृष्ठ भेजने के बजाय है कि ब्राउज़र को JavaScript से भरना होगा। यह SEO, अनुभवी प्रदर्शन, और पहली पेंट में सुधार करता है। ## यह क्यों महत्वपूर्ण है ```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 को पुनः उपयोग करता है इसे फेंकने और पुनः प्रदर्शन करने के बजाय — एक झलकी और प्रदर्शन में सुधार से बचा। ## संबंधित: 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 **prerendering** (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 (hydration के साथ) इसे तुरंत वास्तविक HTML वितरित करके हल करता है, और SSG स्थिर सामग्री के लिए आगे जाता है। जानना कि SSR अपनी अतिरिक्त जटिलता के लिए कब लायक है — और ब्राउज़र-API सावधानियों — मुख्य वास्तुकला निर्णय है।