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 while updating angular.json with SSR configuration.

Hydration mismatches occur when server-rendered HTML differs from client rendering, often from values like new Date(). Move dynamic values into afterNextRender, use signals updated after render, or add ngSkipHydration to skip hydration for dynamic subtrees.

RenderMode.Prerender generates static HTML at build time for marketing pages, RenderMode.Server renders dynamically per request for user-specific content, and RenderMode.Client keeps the route as a client-side SPA for authenticated dashboards.

Browser APIs like window and localStorage are unavailable on the server and must be guarded. Check isPlatformBrowser with PLATFORM_ID, run DOM code inside afterNextRender, or inject them through InjectionToken factories that return null on the server.

Use getPrerenderParams on a server route to return parameter objects for each page to prerender, such as fetching product IDs from an API. Set a PrerenderFallback option (Server, Client, or None) to control handling of non-prerendered paths.

Duplicate requests happen when the client refetches data the server already loaded. Enable withHttpTransferCacheOptions in provideClientHydration to transfer server HTTP responses to the client, or use TransferState manually with makeStateKey.