Angular 22 Demos
Angular 22

Incremental Hydration (Default in v22)

Angular 22 enables incremental hydration by default for SSR apps. Components inside @defer blocks with hydrate triggers are server-rendered but only hydrated on the client when the trigger fires , dramatically improving Time to Interactive.

How to observe: Each widget below shows its hydration timestamp. In an SSR app, widgets show "(server-rendered)" until their hydrate trigger fires. In dev mode (client-only), they hydrate immediately , but the @defer structure is still in place.

hydrate on immediate

Hydrates as soon as the page loads. Use for above-the-fold content that must be interactive right away.

Hero Banner

This widget hydrated immediately on page load.

Hydrated: (server-rendered)

@defer (hydrate on immediate) {
  <app-hero-widget />
}

hydrate on viewport

Hydrates when the element scrolls into the viewport. Perfect for below-the-fold content like comments.

Comments Section

This widget hydrates when it enters the viewport.

Hydrated: (server-rendered)

Alice

Incremental hydration is amazing!

Bob

My TTI improved by 40%.

Carol

No more hydration waterfalls.

@defer (hydrate on viewport) {
  <app-comments-widget />
}

hydrate on hover

Hydrates when the user hovers over the component. Great for secondary interactive content like dashboards.

Analytics Dashboard

This widget hydrates on hover.

Hydrated: (server-rendered)

12483Page Views
3291Visitors
34%Bounce Rate
@defer (hydrate on hover) {
  <app-analytics-widget />
}

hydrate on interaction

Hydrates on the first user interaction (click, keydown, etc.). Ideal for chat widgets or forms that only activate on engagement.

Live Chat

This widget hydrates on interaction (click/keydown).

Hydrated: (server-rendered)

Support: Hi! How can I help you today?
Support: Click or type to hydrate this widget. 
@defer (hydrate on interaction) {
  <app-chat-widget />
}

hydrate on timer(2s)

Hydrates after a specified delay. Useful for low-priority widgets that should eventually become interactive. 

@defer (hydrate on timer(2s)) {
  <app-newsletter-widget />
}

Configuration

  • Default in Angular 22 — provideClientHydration() now includes incremental hydration automatically. No opt-in needed.
  • withIncrementalHydration() — Deprecated since v22. Intent to remove in v24.
  • withNoIncrementalHydration() — Use this to opt out and revert to full hydration behavior.
  • Available triggers:hydrate on immediate, hydrate on viewport, hydrate on hover, hydrate on interaction, hydrate on timer(ms), hydrate on idle, hydrate when condition, hydrate never.
  • SSR + Event Replay — Combine with withEventReplay() to capture user events before hydration completes and replay them after.
  • TTI improvement — Only the visible/needed components hydrate on load, reducing JavaScript execution and improving Time to Interactive. 
// Angular 22 app.config.ts ,  incremental hydration is ON by default
export const appConfig: ApplicationConfig = {
  providers: [
    provideClientHydration(withEventReplay()),
    // That's it! No withIncrementalHydration() needed.
  ],
};