What does Angular SSR (Universal) provide?

Question

Accepted Answer

**Angular SSR** (historically called Angular Universal) renders your app's HTML **on the server** for the initial request, instead of shipping an empty page that the browser must fill in with JavaScript. This improves SEO, perceived performance, and first paint. ## The problem SSR solves ```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 ``` With SSR, the server produces complete HTML so users and search engines get real content right away; Angular then attaches event listeners (hydration) to make it interactive. ## Setting it up ```bash ng add @angular/ssr # adds server rendering to an existing app ``` This scaffolds a Node/Express server that renders Angular on the server and serves the pre-rendered HTML. ## What SSR provides ```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 — avoiding a re-render ```ts provideClientHydration() // non-destructive hydration: reuse server HTML, don't rebuild ``` Modern Angular's **non-destructive hydration** reuses the server-rendered DOM instead of throwing it away and re-rendering — avoiding a flicker and improving performance. ## Related: 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 also supports **prerendering** (SSG) routes at build time for the fastest possible delivery of static content. ## Caveats ```text ⚠️ No browser APIs on the server (window, document, localStorage) — guard with isPlatformBrowser ⚠️ More infrastructure (a Node server to run/maintain) ``` ## Why it matters For content-heavy sites, e-commerce, or any app where **SEO and fast first paint matter**, a client-only Angular SPA falls short — search engines and users get a blank page until JS executes. SSR (with hydration) solves this by delivering real HTML up front, and SSG goes further for static content. Knowing when SSR is worth its added complexity — and the browser-API caveats — is the key architectural judgment.