Lesson 32 / 32

Server-Side Rendering & Hydration

Improve first load and SEO by rendering Angular on the server and hydrating it in the browser.

Why SSR

A client-rendered app sends an empty shell, so users and crawlers wait for JavaScript. Server-side rendering (SSR) sends ready HTML, and hydration attaches event listeners to it in the browser instead of rebuilding the DOM. Static generation (SSG) renders pages at build time.

Enable SSR and hydration

New projects can be created with SSR, and existing ones can add it with a schematic.

ng new my-app --ssr          # new project with SSR
ng add @angular/ssr          # add to an existing app

# app.config.ts
# providers: [provideClientHydration(withEventReplay())]

Avoid touching window or document directly in components that render on the server. Guard browser-only code with afterNextRender or isPlatformBrowser.