Angular SSR (Universal) શું આપે છે?

Question

Accepted Answer

**Angular SSR** (ઐતિહાસિક રીતે Angular Universal કહેવાય છે) તમારા app ના 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 પછી ઇવેન્ટ સ્લીપનર્સ (હાઇડ્રેશન) જોડે છે તેને ક્રિયાશીલ બનાવવા માટે. ## તેને સેટ કરવું ```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) ``` ## તે મહત્વનું કેમ છે માટે સામગ્રી-ભારે સાઇટો, ઈ-કોમર્સ, અથવા કોઈ પણ app જ્યાં **SEO અને ઝડપી પ્રથમ પેઈન્ટ મહત્વનું છે**, client-only Angular SPA અપર્યાપ્ત છે — શોધ એન્જીનો અને વપરાશકર્તાઓ JS સુધી ખાલી પૃષ્ઠ મેળવે છે. SSR (હાઇડ્રેશન સાથે) આને સીધું HTML આગળ વધારવા દ્વારા હલ કરે છે, અને SSG સ્થિર સામગ્રી માટે આગળ જાય છે. ક્યારે SSR તેની વધારેલ જટિલતા માટે યોગ્ય છે તે જાણવું — અને બ્રાઉઝર-API સતર્કતાઓ — મુખ્ય આર્કિટેક્ચર નિર્ણય છે.