provideClientHydration() is an Angular configuration function that enables client-side hydration for server-rendered application output. Instead of destroying the server-created DOM and rebuilding it in the browser, Angular matches existing nodes and restores their bindings, improving startup performance and reducing visual flicker. section 9.3.2
Add the provider to the shared application configuration used by the browser and server bootstrap paths. SSR projects generated by Angular include it by default, so adoption normally requires only this configuration change. section 9.2.1 section 9.3.2
Enable hydration in app.config.ts
import { ApplicationConfig } from '@angular/core'; import { provideRouter } from '@angular/router'; import { provideClientHydration } from '@angular/platform-browser'; import { routes } from './app.routes'; export const appConfig: ApplicationConfig = { providers: [provideRouter(routes), provideClientHydration()] };
Hydration can also reuse server-side HTTP responses on the client, limiting duplicate requests. A slow connection can expose a short interval in which rendered HTML exists but Angular has not yet attached interaction handlers; withEventReplay() records events during that interval and replays them after hydration. section 9.3.2
