angular-ssr

Run ng add @angular/ssr to add server-side rendering to an existing Angular project. This installs the @angular/ssr package and generates server.ts, main.server.ts, and app.config.server.ts with the required providers.

Hydration mismatches occur when server-rendered HTML differs from client rendering, often from Date or random values. Move browser-only logic into afterNextRender, use isPlatformBrowser checks, or add ngSkipHydration to dynamic subtrees.

RenderMode.Prerender generates static HTML at build time for pages like blogs, RenderMode.Server renders dynamically per request for user-specific content, and RenderMode.Client falls back to client-side SPA rendering for authenticated dashboards.

Direct access to window or localStorage fails on the server since those APIs do not exist in Node.js. Guard usage with isPlatformBrowser checks, afterNextRender callbacks, or injection tokens that return null on the server.

Use getPrerenderParams on a server route to return parameter values, such as product IDs fetched from an API, for build-time prerendering. Set a PrerenderFallback option to handle non-prerendered paths via SSR, client rendering, or 404.

Angular SSR supports cookie-based authentication by injecting the REQUEST token from @angular/ssr/tokens to read request headers on the server. A common pattern is to mark authenticated routes as RenderMode.Client so they render only in the browser.