provideClientHydration — Angular

Sets up providers necessary to enable hydration functionality for the application.

API

function provideClientHydration(
  ...features: HydrationFeature<HydrationFeatureKind>[]
): EnvironmentProviders;

@paramfeaturesHydrationFeature<HydrationFeatureKind>[]

Optional features to configure additional hydration behaviors.

@returnsEnvironmentProviders

A set of providers to enable hydration.

Description

Sets up providers necessary to enable hydration functionality for the application.

By default, the function enables the recommended set of features for the optimal performance for most of the applications. It includes the following features:

Reconciling DOM hydration. Learn more about it here.
HttpClient response caching while running on the server and transferring this cache to the client to avoid extra HTTP requests. Learn more about data caching here. Incremental hydration. Learn more.

These functions allow you to disable some of the default features or enable new ones:

withNoHttpTransferCache to disable HTTP transfer cache
withHttpTransferCacheOptions to configure some HTTP transfer cache options
withI18nSupport to enable hydration support for i18n blocks
withEventReplay to enable support for replaying user events
withNoIncrementalHydration to disable incremental hydration

Usage Notes

Basic example of how you can enable hydration in your application when bootstrapApplication function is used:

bootstrapApplication(App, {
  providers: [provideClientHydration()]
});

Alternatively if you are using NgModules, you would add provideClientHydration to your root app module's provider list.

@NgModule({
  declarations: [RootCmp],
  bootstrap: [RootCmp],
  providers: [provideClientHydration()],
})
export class AppModule {}