Cookies concent notice

This site uses cookies from Google to deliver its services and to analyze traffic.
Learn more
Skip to main content
This site is no longer updated.Head to Angular.devHome
/

This is the archived documentation for Angular v17. Please visit angular.dev to see this page for the current version of Angular.

provideClientHydration

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

See more...

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

Optional features to configure additional router behaviors.

Returns

EnvironmentProviders: A set of providers to enable hydration.

See also

Description

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.

These functions allow you to disable some of the default features or configure features

Further information is available in the Usage Notes...

Usage notes

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

      
      bootstrapApplication(AppComponent, {
  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 {}