Kaj zagotavlja Angular SSR (Universal)?

Question

Accepted Answer

**Angular SSR** (zgodovinsko ime Angular Universal) renderira HTML vaše aplikacije **na strežniku** pri prvotni zahtevi, namesto da pošlje prazno stran, ki jo mora brskalnik zapolniti z JavaScriptom. To izboljša SEO, zaznano zmogljivost in prvo risanje. ## Problem, ki ga SSR rešuje ```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 ``` Z SSR strežnik proizvede popoln HTML, zato uporabniki in iskalniki dobijo pravo vsebino takoj; Angular nato priloži poslušalce dogodkov (hidratacija), da postane interaktivna. ## Postavitev ```bash ng add @angular/ssr # adds server rendering to an existing app ``` To nastavi Node/Express strežnik, ki renderira Angular na strežniku in streže predhodno renderiran HTML. ## Kar SSR zagotavlja ```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 — izogibanje ponovnemu risanju ```ts provideClientHydration() // non-destructive hydration: reuse server HTML, don't rebuild ``` Moderni Angular **ne-destruktivna hidratacija** ponovno uporabi strežnik-renderiran DOM namesto da ga zavrže in ponovno renderira — izogiba se bliskanju in izboljša zmogljivost. ## Povezano: 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 tudi podpira **prerendering** (SSG) poti ob času gradnje za najhitrejšo dostavo statične vsebine. ## Opozorila ```text ⚠️ No browser APIs on the server (window, document, localStorage) — guard with isPlatformBrowser ⚠️ More infrastructure (a Node server to run/maintain) ``` ## Zakaj je to pomembno Za spletna mesta s toliko vsebine, e-trgovino ali katero koli aplikacijo, kjer sta **SEO in hitro prvo risanje zelo pomembna**, samo-odjemalska Angular SPA ne zadošča — iskalniki in uporabniki dobijo prazno stran, dokler se JS ne izvede. SSR (s hidratacijo) to rešuje z dostavo pravega HTML-a na začetku, SSG pa se nadaljuje za statično vsebino. Znanje, kdaj je SSR vredno svoje dodatne kompleksnosti — in opozorila glede brskalnikovih API-jev — je ključna arhitekturna presoja.