Hydration lets an Angular application reuse HTML generated by server-side rendering (SSR) or prerendering when its JavaScript starts in the browser. The page can appear while large JavaScript files download, instead of leaving the user with an empty window. Without hydration, Angular must replace the server-generated elements during that transition, which can be jarring. section 27.4 section 27.4.2
SSR executes the application on a server for each response and can consume considerable server resources. Prerendering generates static HTML at build time, avoiding that runtime cost, but every user receives the same initial HTML. Hydration works with either approach; it does not make prerendered content reflect later changes in data or state. section 8.2 section 27.6
Listing 27.14 Enabling hydration in the app.module.ts file in the src/app folder
import { NgModule } from '@angular/core';
import { BrowserModule, provideClientHydration }
from '@angular/platform-browser';
//import { AppComponent } from './app.component';
import { ModelModule } from "./model/model.module";
import { CoreModule } from "./core/core.module";
import { TableComponent } from "./core/table.component";
import { FormComponent } from "./core/form.component";
import { MessageModule } from "./messages/message.module";
import { MessageComponent } from "./messages/message.component";
import { AppComponent } from './app.component';
import { routing } from "./app.routing";
import { TermsGuard } from "./terms.guard"
import { LoadGuard } from "./load.guard";
@NgModule({
declarations: [AppComponent],
imports: [BrowserModule, ModelModule, CoreModule, MessageModule,
routing],
providers: [TermsGuard, LoadGuard, provideClientHydration()],
bootstrap: [AppComponent]
})
export class AppModule { }
The Angular module configuration imports provideClientHydration from @angular/platform-browser and adds its result to the providers array. Configure the browser application module, not the server module. section 27.4.2
Prepare server-generated content for the period before hydration:
- Decide which controls can work before JavaScript loads. In a prerendered store, navigation buttons remain visible but disabled until hydration enables them; navigation that must work earlier can instead use links that request another HTML document. section 8.2.4
- Adapt code that runs in both environments. A platform-detection service can select a server-safe data URL rather than relying on the browser’s location during SSR. section 27.4.2
Check the handoff on a slow connection
Serve a prerendered build with an HTTP server, select Fast 3G in browser developer tools, and reload with an empty cache. Watch the HTML appear before the JavaScript finishes downloading; previously disabled buttons become active when hydration runs. For an SSR application, the same slowdown makes reused elements and newly enabled navigation easier to observe. section 8.2.5 section 27.4.7
Hydration does not remove SSR’s need for server resources or make every Angular feature suitable for server execution. In Angular 16, hydration is a developer-preview feature and may change. section 27.4 section 27.4.2
