Angular Universal SSR: The Complete 2024 Setup Guide

Server-Side Rendering (SSR) with Angular Universal can push your Lighthouse score from 60 to 95+ and dramatically improve Core Web Vitals. This guide walks through a production-ready setup from scratch.

Why SSR Matters

Search engines crawl JavaScript-heavy SPAs poorly. SSR sends fully rendered HTML on the first request, which means faster First Contentful Paint, better SEO indexing, and improved user experience on slow connections.

Setup in 5 Steps

1. Add Angular Universal: ng add @angular/ssr. 2. Update server.ts to handle your routes. 3. Add TransferState for API data. 4. Handle browser-only APIs with isPlatformBrowser. 5. Deploy to Node.js server or use static pre-rendering for fully static pages.

Common Pitfalls

The biggest gotcha is using browser APIs like localStorage or window directly — these do not exist on the server. Always guard them with isPlatformBrowser from @angular/common.