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 హెచ్చరికలు - ప్రధాన ఆర్కిటెక్చర్ తీర్పు.