Was bietet Angular SSR (Universal)?

Question

Accepted Answer

**Angular SSR** (historisch Angular Universal genannt) rendert die HTML deiner App **auf dem Server** für die initiale Anfrage, anstatt eine leere Seite zu versenden, die der Browser mit JavaScript füllen muss. Dies verbessert SEO, wahrgenommene Performance und First Paint. ## Das Problem, das SSR löst ```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 ``` Mit SSR produziert der Server vollständiges HTML, damit Nutzer und Suchmaschinen sofort echte Inhalte erhalten; Angular fügt dann Event Listener an (Hydration), um es interaktiv zu machen. ## Einrichtung ```bash ng add @angular/ssr # adds server rendering to an existing app ``` Dies generiert einen Node/Express-Server, der Angular auf dem Server rendert und das vorgerenderte HTML ausliefert. ## Was SSR bietet ```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 — ein erneutes Rendern vermeiden ```ts provideClientHydration() // non-destructive hydration: reuse server HTML, don't rebuild ``` Modernes Angular's **nicht-destruktive Hydration** nutzt das vom Server gerenderte DOM wieder, anstatt es zu verwerfen und neu zu rendern — vermeidet Flicker und verbessert die Performance. ## Zusammenhängend: 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 unterstützt auch **Prerendering** (SSG) von Routes zur Build-Zeit für die schnellstmögliche Auslieferung statischer Inhalte. ## Vorbehalte ```text ⚠️ No browser APIs on the server (window, document, localStorage) — guard with isPlatformBrowser ⚠️ More infrastructure (a Node server to run/maintain) ``` ## Warum es wichtig ist Für inhaltsreiche Websites, E-Commerce oder jede App, bei der **SEO und schneller First Paint wichtig sind**, reicht eine Client-only Angular SPA nicht aus — Suchmaschinen und Nutzer sehen eine leere Seite, bis JS ausgeführt wird. SSR (mit Hydration) löst dies, indem es echtes HTML von vorne herein ausliefert, und SSG geht noch weiter für statische Inhalte. Zu wissen, wann SSR seinen zusätzlichen Komplexitätsaufwand wert ist — und welche Browser-API-Vorbehalte es gibt — ist die Schlüsselfeststellung der Architektur.