SSR & Prerendering

During SSR the component's constructor runs in Node, where window, localStorage and navigator do not exist, so the read throws. Move browser work into afterNextRender, reach the document through the DOCUMENT token, or guard browser-only logic with isPlatformBrowser(PLATFORM_ID).

Give the route RenderMode.Prerender in the server routes passed to provideServerRendering(withRoutes(...)). At build time Angular renders it once and writes a static index.html for that path, which is served as-is to every visitor.

Each ServerRoute passed to withRoutes() sets a renderMode: Server renders HTML on every request, Prerender renders it once at build time, and Client returns the unrendered shell so the browser renders the page.

Angular's HTTP transfer cache records eligible HttpClient responses made during the server render, serializes them into the HTML, and replays them in the browser during hydration, so the same GET or HEAD request is not sent twice.

The server renders the block's main content instead of its @placeholder. In the browser that HTML stays dehydrated, with its code not yet loaded, until the block enters the viewport; then Angular fetches the code and hydrates it in place.

Use afterNextRender for DOM work, since it runs only in the browser after rendering. Use isPlatformBrowser(PLATFORM_ID) for small non-rendering branches. When a whole service behaves differently per platform, provide separate implementations in the browser and server configs.

The default '**' Prerender server route now matches docs/:slug, and the build cannot guess slug values, so it fails. Add a server route for docs/:slug with getPrerenderParams returning objects like { slug: 'routing' }; the build renders one page per object.

In Angular 22 provideClientHydration() enables incremental hydration by default; withNoIncrementalHydration() opts out, and withIncrementalHydration() is deprecated. It also enables event replay, so withEventReplay() is redundant.

withEventReplay() captures native events such as clicks that happen before hydration and replays them once listeners are attached. In Angular 22 it is on by default, because default incremental hydration enables it.

ngSkipHydration makes Angular skip hydrating one component and its children, which then re-render from scratch on the client. It is allowed only on a component host element and costs hydration's benefits in that subtree.

hydrate on interaction applies only on the initial server-rendered load; after client-side navigation the block uses on idle and shows its @placeholder first. The placeholder is therefore still required for the client path.

DOCUMENT gives the platform's document through DI: the real one in the browser and a per-request server DOM during SSR. Changes made through it, such as head tags, are serialized into the HTML, while the global document does not exist on the server.

The route's fallback decides. PrerenderFallback.Server, the default, renders the page on the server at request time; Client sends the client-rendered shell; None makes Angular's engine decline the request, so the next handler, usually a 404, answers.

AngularAppEngine takes a Web Request and returns a Response; AngularNodeAppEngine accepts Node requests too and converts them. Both resolve to null for a non-Angular URL so the server can call the next handler.

Either give the server route a static status: 404, or inject RESPONSE_INIT in the not-found component and set status to 404. RESPONSE_INIT, like REQUEST, is null in the browser, when prerendering, and for Client routes.

By default only GET and HEAD are cached, minus requests with auth headers, cookies or credentials and responses marked no-store, no-cache, private or carrying Set-Cookie. withHttpTransferCacheOptions relaxes these globally; transferCache adjusts one request.

Create a typed key with makeStateKey, inject TransferState, set the value during the server render, and in the browser read it with get or hasKey before recomputing. Values travel as JSON inside the page, so keep them small, plain and non-secret.

Hydration expects the browser DOM to match the server's; the carousel restructured it before Angular hydrated. Let Angular render the slides, initialize the library after hydration, or wrap it in a component marked ngSkipHydration.

Choose by when each block must respond: hydrate on idle or interaction for the add-to-basket panel, hydrate on viewport for comments far below the fold, and hydrate never for a static footer.

Render the same default theme on server and browser, then read localStorage only inside afterNextRender and set a class on the html element through DOCUMENT. To avoid a flash of the default, keep the choice in a cookie the server can read.

The server sends HTML once the app is stable, with no pending tasks left. A zoneless app ignores untracked work like an SDK promise, so HTML ships early; a task never released hangs the render. PendingTasks registers such work.

Pages that depend on the visitor, cookies, headers, query strings or fast-changing data should not be prerendered. At build time REQUEST is null, so the page renders its anonymous, default version once, and every visitor receives it until the next build.

Authenticated responses are user-specific, and the transfer cache embeds the whole response body in the HTML. If that HTML is cached or prerendered, one user's data reaches others. Enable the flag only for per-request, non-shared pages, narrowed with filter.

Check whether the server stored the response in the ng-state script, then compare the browser request with the server one: a different origin or params, an auth header, credentials, uncacheable Cache-Control or Set-Cookie, a late request after stability, or a non-HttpClient call all cause misses.

Prerender pages that are identical for everyone and must rank, render per request (Server) pages that depend on the request or change often, and use Client for per-user areas nobody indexes, choosing the ** default deliberately.

With static output, the build writes an HTML page for the old path containing a zero-delay meta refresh and a link: a soft redirect served with status 200. Behind Angular's server engine, the same route gets a real HTTP redirect, 302 by default.

NG0507 means the server's hydration integrity comment is missing, so something rewrote the HTML in transit, typically CDN minification stripping comments and whitespace. Disable it; also keep templates valid HTML and whitespace settings identical.

Hydration runs from the top-most dehydrated @defer block down, and a hydrate when condition belongs to the parent's template, which is not live while dehydrated. So hydrate when works only on the top-most dehydrated block.

BootstrapContext carries the platformRef the server created for this request. The server bootstrap function must accept it and pass it as the third argument: bootstrapApplication(App, config, context).