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 பின்னர் நிகழ்வு শ்રवणkarthigals (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 (पूर्व-वरण) ```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 (hydration के साथ) शुरुआत में वास्तविक HTML प्रदान करके इसे हल करता है, और SSG स्थिर सामग्री के लिए आगे बढ़ता है। जानना कि SSR इसकी अतिरिक्त जटिलता के लायक है - और ब्राउजर-API चेतावनियां - मुख्य आर्किटेक्चरल निर्णय है।