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.