Wat biedt Angular SSR (Universal)?

Question

Accepted Answer

**Angular SSR** (historisch Angular Universal genoemd) rendert uw app's HTML **op de server** voor het eerste verzoek, in plaats van een lege pagina te versturen die de browser met JavaScript moet invullen. Dit verbetert SEO, waargenomen prestaties en first paint. ## Waarom het belangrijk is ```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 ``` Met SSR produceert de server volledige HTML zodat gebruikers en zoekmachines meteen echte inhoud krijgen; Angular voegt vervolgens event listeners (hydration) toe om het interactief te maken. ## Hoe u het instelt ```bash ng add @angular/ssr # adds server rendering to an existing app ``` Dit scaffoldt een Node/Express-server die Angular op de server rendert en de pre-gerenderde HTML uitserveert. ## Wat SSR biedt ```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 — herrenderen vermijden ```ts provideClientHydration() // non-destructive hydration: reuse server HTML, don't rebuild ``` Moderne Angular's **non-destructive hydration** hergebruikt de server-gerenderde DOM in plaats van het weg te gooien en opnieuw te renderen — hiermee wordt flikkering voorkomen en prestaties verbeterd. ## Verwant: 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 ondersteunt ook **prerendering** (SSG) routes op buildtijd voor de snelst mogelijke levering van statische inhoud. ## Voorbehouden ```text ⚠️ No browser APIs on the server (window, document, localStorage) — guard with isPlatformBrowser ⚠️ More infrastructure (a Node server to run/maintain) ``` ## Waarom het belangrijk is Voor inhoudsrijke sites, e-commerce of elke app waarbij **SEO en snelle first paint belangrijk zijn**, tekort schiet een client-only Angular SPA — zoekmachines en gebruikers krijgen een lege pagina totdat JS wordt uitgevoerd. SSR (met hydration) lost dit op door meteen echte HTML af te leveren, en SSG gaat verder voor statische inhoud. Weten wanneer SSR zijn toegevoegde complexiteit waard is — en de voorbehouden voor browser-API's — is de sleutelachitectuurbeslissing.