Hydration behavior in Angular

Introduction

Hydration helps Angular make a static page interactive by connecting the server-rendered HTML with Angular's code on the browser.

When you want your Angular app to load faster by showing content quickly from the server.

When you want search engines to see your page content easily for better search results.

When you want users to interact with your page right after it loads without waiting for all scripts.

When you build apps that work well on slow internet or devices by showing content early.

Syntax

Angular

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app/app.component';

bootstrapApplication(AppComponent, {
  providers: [],
  hydration: true
});

The hydration: true option tells Angular to connect the server HTML with the client app.

This is used with Angular's standalone components and server-side rendering.

Examples

Basic example enabling hydration for the root component.

Angular

bootstrapApplication(AppComponent, { hydration: true });

This disables hydration, so Angular will render the app fresh on the client.

Angular

bootstrapApplication(AppComponent, { hydration: false });

Sample Program

This Angular app shows a heading and a button. The button updates a counter when clicked. With hydration enabled, the server-rendered HTML is reused and Angular makes it interactive without reloading the content.

Angular

import { Component } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';

@Component({
  selector: 'app-root',
  template: `<h1>Welcome to Hydrated Angular!</h1><button (click)="count = count + 1">Clicked {{count}} times</button>`,
  standalone: true
})
export class AppComponent {
  count = 0;
}

bootstrapApplication(AppComponent, { hydration: true });

Important Notes

Hydration requires your app to be server-side rendered first.

If hydration is off, Angular will replace the server HTML, causing a flicker.

Hydration improves user experience by making pages interactive faster.

Summary

Hydration connects server HTML with Angular on the client.

It helps pages load faster and become interactive quickly.

Use hydration: true in bootstrapApplication to enable it.