What is hydration?

Hydration is the process that restores the server side rendered application on the client. This includes things like reusing the server rendered DOM structures, persisting the application state, transferring application data that was retrieved already by the server, and other processes.

To enable hydration, we have to enable server side rendering or Angular Universal. Once enabled, we can add the following piece of code in the root component.

import {
 bootstrapApplication,
 provideClientHydration,
} from '@angular/platform-browser';

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

Alternatively we can add providers: [provideClientHydration()] in the App Module

import {provideClientHydration} from '@angular/platform-browser';
import {NgModule} from '@angular/core';
​
@NgModule({
 declarations: [RootCmp],
 exports: [RootCmp],
 bootstrap: [RootCmp],
 providers: [provideClientHydration()],
})
export class AppModule {}