SSR & Hydration

Server-Side Rendering (SSR) & Hydration

Standard Angular applications are Client-Side Rendered (CSR).

The browser downloads an empty HTML file and massive JavaScript bundles, then renders the UI locally.

While powerful, this creates terrible initial load times and makes it incredibly difficult for Google to index your website for SEO!

Enter Server-Side Rendering (SSR)

Server-Side Rendering solves the SEO problem entirely.

With SSR (powered by Angular Universal), an actual Node.js backend executes your Angular application.

It generates a fully-formed, data-rich HTML string and sends it instantly to the user's browser.

This provides lightning-fast load times and perfect SEO compatibility.

Non-Destructive Hydration

Historically, once the server sent the HTML to the browser, Angular would throw it all away and redraw everything from scratch once the JavaScript loaded.

This caused a frustrating "flicker" effect on the screen.

In Angular 16+, the team introduced Non-Destructive Hydration.

import { bootstrapApplication, provideClientHydration } from '@angular/platform-browser';
import { AppComponent } from './app/app.component';

// Adding Hydration to your global providers
bootstrapApplication(AppComponent, {
  providers: [
    provideClientHydration()
  ]
});

Hydration magically traverses the existing HTML provided by the server and simply "wakes it up" by attaching event listeners silently!

Platform Checking

When using SSR, your code executes on the Node.js server.

Node.js does not have browser features like the window, document, or localStorage objects!

If your component relies on localStorage, the server will crash instantly when trying to render the page.

You must wrap browser-specific code in a platform check using isPlatformBrowser.

import { Component, Inject, PLATFORM_ID } from '@angular/core';
import { isPlatformBrowser } from '@angular/common';

export class SafeComponent {
  constructor(@Inject(PLATFORM_ID) private platformId: Object) {}
  saveData() {
    // This protects the Node.js server from crashing!
    if (isPlatformBrowser(this.platformId)) {
      localStorage.setItem('user', 'John');
    }
  }
}