Chapter 14.1☕ 15 min read

Server-Side Rendering (SSR) with Angular

SSR renders Angular on the server, sends full HTML to the browser. Better SEO, faster content visibility, and improved social sharing.

01What is SSR

Normal Angular (CSR): Browser downloads empty HTML → loads JS → Angular bootstraps → renders content → user sees page.

SSR: Browser requests URL → Node.js server renders Angular → sends full HTML → user sees content immediately → JS loads → hydration adds interactivity.

"SSR = pre-cooked biryani — server pe bana ke bhejo, client pe sirf garam karo."

Key benefit: SEO. Google sees your full content, not an empty placeholder page.

02Why SSR Matters

Why SSR matters for your app:

SEO: Google crawls rendered HTML. Without SSR, Google may see an empty page. "Bina SSR = blank page dikhata hai — ranking zero."
Performance: First Contentful Paint happens in milliseconds instead of seconds. Users see content while JS downloads.
Social sharing: Facebook, Twitter, WhatsApp see your meta tags and content immediately in the link preview.

Hyderabad companies: TCS, Wipro, Infosys projects often require SSR for client-facing apps. SSR is not optional for production Angular apps.

03Adding SSR to Angular

Adding SSR to an existing Angular app is one command:

ng add @angular/ssr

"Ek command — SSR setup ho gaya."

This command does everything:

Adds @angular/ssr package to your project
Creates src/app/app.config.server.ts — server config
Creates src/main.server.ts — server entry point
Updates angular.json with SSR configuration
Adds server.ts — Express server for serving the app

Build and run: ng build generates browser + server bundles. Run with node dist/project-name/server/server.mjs.

04How SSR Works

How SSR works step by step:

Request comes to Node.js server
Angular renders the component tree on the server (just once, no browser needed)
Server sends FULL HTML to browser — user sees content immediately
Browser downloads JS bundles (in background)
Angular "hydrates" — attaches event listeners to existing HTML, activates app

"Server = painter (paints the wall), Browser = electrician (adds switches/lights)."

Hydration is the process of reusing the server-rendered HTML and adding client-side interactivity. No content flash or re-render.

05SSR Gotchas

SSR gotchas to watch out for:

window / document are NOT available on the server. Accessing them crashes the server. Check platform: inject(PLATFORM_ID) + isPlatformBrowser(platformId)
localStorage not available on server. Wrap all localStorage access in if (isPlatformBrowser(...))
Third-party libraries that manipulate DOM may break. Check SSR compatibility before using.
Heavy components: use @defer to skip server rendering for non-critical parts.

private platformId = inject(PLATFORM_ID);

ngOnInit() {
  if (isPlatformBrowser(this.platformId)) {
    // Safe to use window, document, localStorage
  }
}

Key Takeaways

SSR renders Angular on the server — sends full HTML to browser
Critical for SEO: Google sees complete content, not empty page
ng add @angular/ssr — one command sets up everything
Hydration attaches event listeners to server-rendered HTML
Always use isPlatformBrowser() before accessing window/document/localStorage

Previous13.4 — Integration Testing 📋 All Chapters Next Chapter14.2 — SEO & Meta Tags →