Ką suteikia Angular SSR (Universal)?

Question

Accepted Answer

**Angular SSR** (istoriškai vadinama Angular Universal) jūsų programos HTML **serveryje** renduoja pradiniame užklausoje, o ne siuntė tuščią puslapį, kurį naršyklė turi užpildyti JavaScript. Tai pagerina SEO, suvokiamą našumą ir pirmąjį piešimą. ## Problema, kurią SSR išsprendžia ```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 ``` Su SSR serveris sukuria visą HTML, todėl naudotojai ir paieškos varikliai iš karto gauna tikrą turinį; tada Angular prijungia įvykių klausytojus (hidratacija) padarydama jį interaktyviam. ## Jo sąranka ```bash ng add @angular/ssr # adds server rendering to an existing app ``` Tai sukuria Node/Express serverį, kuris renduoja Angular serveryje ir teikia iš anksto renderuotą HTML. ## Ką teikia 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 ``` ## Hidratacija — perrenderavimo išvengimas ```ts provideClientHydration() // non-destructive hydration: reuse server HTML, don't rebuild ``` Modernus Angular **nedestruktyvus hidratacija** pakartotinai naudoja serveryje renderuotą DOM vietoj to, kad jį išmestu ir perrenderuotų — išvengia mirksėjimo ir pagerina našumą. ## Susijęs: SSG (išankstinis atvaizdavimas) ```text SSR → render per request (dynamic content, always fresh) SSG → prerender pages at BUILD time (static, fastest) — good for content that rarely changes ``` Angular taip pat palaikytum **išankstinį atvaizdavimą** (SSG) nustatytas maršrutus statinio turinio greičiausiam pristatymui. ## Įspėjimai ```text ⚠️ No browser APIs on the server (window, document, localStorage) — guard with isPlatformBrowser ⚠️ More infrastructure (a Node server to run/maintain) ``` ## Kodėl tai svarbu Turinio riebaus svetainėms, el. pirkinių arba bet kurio programai, kuriose **SEO ir greitas pirmasis piešimas svarbus**, tik kliento pusėje Angular SPA nepakanka — paieškos varikliai ir naudotojai gauna tuščią puslapį, kol vykdomas JS. SSR (su hidratacija) tai išsprendžia suteikdama tikrą HTML iš pradžių, o SSG eina toliau dėl statinio turinio. Žinoti, kada SSR verto jos pridėtos sudėtingumo — ir naršyklės API įspėjimai — yra pagrindinė architektūrinė sprendimo priimimo.