Vad tillhandahåller Angular SSR (Universal)?

Question

Accepted Answer

**Angular SSR** (historiskt kallad Angular Universal) renderar appens HTML **på servern** för den initiala förfrågan, istället för att skicka en tom sida som webbläsaren måste fylla med JavaScript. Detta förbättrar SEO, upplevd prestanda och första målning. ## Problemet 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 producerar servern fullständig HTML så användare och sökmotorer får verkligt innehål direkt; Angular bifogar sedan eventlyssnare (hydration) för att göra det interaktivt. ## Konfiguration ```bash ng add @angular/ssr # adds server rendering to an existing app ``` Detta skapar en Node/Express-server som renderar Angular på servern och serverar den förrenderade HTML:en. ## Vad SSR tillhandahåller ```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 — undvika omrendering ```ts provideClientHydration() // non-destructive hydration: reuse server HTML, don't rebuild ``` Modern Angulars **icke-destruktiv hydration** återanvänder servern-renderad DOM istället för att kasta den och omrendera — undviker flimmer och förbättrar prestanda. ## Relaterat: SSG (förrendering) ```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öder också **förrendering** (SSG) av rutter vid byggtid för snabbast möjlig leverans av statiskt innehål. ## Varningar ```text ⚠️ No browser APIs on the server (window, document, localStorage) — guard with isPlatformBrowser ⚠️ More infrastructure (a Node server to run/maintain) ``` ## Varför det spelar roll För innehållsrika webbplatser, e-handel eller en app där **SEO och snabb första målning är viktiga**, faller en klientside-only Angular SPA kort — sökmotorer och användare får en tom sida tills JS körs. SSR (med hydration) löser detta genom att leverera verklig HTML från början, och SSG går längre för statiskt innehål. Att veta när SSR är värt sin ökade komplexitet — och webbläsar-API-varningarna — är den viktigaste arkitektoniska bedömningen.