Hva gir Angular SSR (Universal)?

Question

IT Interview Practice · Accepted Answer

**Angular SSR** (historisk kalt Angular Universal) gjengir appen din HTML **på serveren** for den opprinnelige forespørselen, i stedet for å sende en tom side som nettleseren må fylle med JavaScript. Dette forbedrer SEO, oppfattet ytelse og første maling. ## Problemet SSR løser ```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 ``` Med SSR produserer serveren komplett HTML slik at brukere og søkemotorer får ekte innhold umiddelbart; Angular legger deretter til hendelseslyttere (hydration) for å gjøre det interaktivt. ## Sette det opp ```bash ng add @angular/ssr # adds server rendering to an existing app ``` Dette oppretter en Node/Express-server som gjengir Angular på serveren og serverer den forhåndsgjengivede HTML. ## Hva SSR gir ```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 — unngår ny gjengivelse ```ts provideClientHydration() // non-destructive hydration: reuse server HTML, don't rebuild ``` Modern Angulars **ikke-destruktive hydration** gjenbruker den servergjengivede DOM i stedet for å kaste den bort og gjengive på nytt — unngår flimring og forbedrer ytelsen. ## Relatert: 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 støtter også **prerendering** (SSG) ruter på byggetidspunkt for raskest mulig levering av statisk innhold. ## Forbehold ```text ⚠️ No browser APIs on the server (window, document, localStorage) — guard with isPlatformBrowser ⚠️ More infrastructure (a Node server to run/maintain) ``` ## Hvorfor det er viktig For innholdsrike nettsteder, e-handel eller hvilken som helst app der **SEO og rask første maling er viktig**, kommer en klientonly Angular SPA til kort — søkemotorer og brukere får en tom side inntil JS kjøres. SSR (med hydration) løser dette ved å levere ekte HTML umiddelbart, og SSG går videre for statisk innhold. Ved å vite når SSR er verdt sin ekstra kompleksitet — og forbehold for nettleser-API — er nøkkelarkitektursbeslutningen.

Problemet SSR løser

Sette det opp

Hva SSR gir

Hydration — unngår ny gjengivelse

Relatert: SSG (prerendering)

Forbehold

Hvorfor det er viktig

Relaterte spørsmål