---
title: "SSR, SSG, hybrid rendering, and hydration"
chapter: "15"
---

# SSR, SSG, hybrid rendering, and hydration

Angular can render routes on the client, per request on the server, or ahead of
time as static pages.

## Choose per route

- CSR: private applications and highly interactive authenticated pages;
- SSR: dynamic public content needing first response and SEO;
- SSG: stable public content that can build ahead;
- hybrid: one application with route-specific strategies.

Rendering mode is a product/cache/security decision, not a checkbox.

## Hydration

Hydration reuses server DOM on the client. Server and client output must match.
Invalid HTML, direct DOM mutation, random/time differences, browser-only code,
and third-party scripts can cause mismatch.

## Incremental hydration

Incremental hydration combines server-rendered `@defer` content, event replay,
and triggers such as interaction, viewport, idle, hover, timer, or condition.
It reduces initial JavaScript while preserving initial content.

## Data and privacy

TransferState/resource IDs can prevent duplicate server/client requests. Never
serialize user-specific secrets into cacheable HTML. Define cache keys, vary
headers, authentication, and invalidation.

## Browser APIs

Guard `window`, `document`, storage, observers, and Flowbite imports. Use
`isPlatformBrowser` and render callbacks where appropriate. Prefer injectable
browser ports for testability.

## Stability

Pending async work can delay server serialization and hydration cleanup.
Temporarily use Angular's stability debugging tools and task tracking; remove
debug tooling from production bundles.

## Feynman check

SSR paints HTML. Hydration connects Angular behavior to it. Incremental
hydration connects selected islands later. Explain what a click does before its
island hydrates.