Hvad giver Angular SSR (Universal)?

Question

Accepted Answer

**Angular SSR** (historisk kaldet Angular Universal) renderer dit apps HTML **på serveren** for den indledende anmodning, i stedet for at sende en tom side, som browseren skal udfylde med JavaScript. Dette forbedrer SEO, opfattet ydeevne og første billede. ## Det problem, som 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 producerer serveren komplet HTML, så brugere og søgemaskiner får rigtig indhold med det samme; Angular knytter derefter event listeners (hydration) for at gøre det interaktivt. ## Opsætning af det ```bash ng add @angular/ssr # adds server rendering to an existing app ``` Dette bygger et Node/Express-server, der renderer Angular på serveren og serverer det pre-renderede HTML. ## Hvad SSR giver ```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 — undgå en re-render ```ts provideClientHydration() // non-destructive hydration: reuse server HTML, don't rebuild ``` Modern Angulars **non-destructive hydration** genbruger server-renderede DOM i stedet for at kassere det og re-rendere — undgår flimmer og forbedrer ydeevnen. ## Relateret: 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 understøtter også **prerendering** (SSG) ruter på build-tid for den hurtigst mulige levering af statisk indhold. ## Forbehold ```text ⚠️ No browser APIs on the server (window, document, localStorage) — guard with isPlatformBrowser ⚠️ More infrastructure (a Node server to run/maintain) ``` ## Hvorfor det betyder noget For indholdskrævende websteder, e-handel eller enhver app, hvor **SEO og hurtig første billede betyder noget**, kommer en client-only Angular SPA til kort — søgemaskiner og brugere får en tom side, indtil JS udfører. SSR (med hydration) løser dette ved at levere rigtig HTML fra starten, og SSG går længere for statisk indhold. At vide, hvornår SSR er værd dets ekstra kompleksitet — og browser-API forbeholdene — er den vigtige arkitektoniske afgørelse.