Exploring Angular’s new hydration features: Incremental Hydration

With each major release, Angular has continued to focus on improving application performance, particularly through server-side rendering (SSR) and hydration techniques. Hydration is key to enhancing the core web vitals, which are crucial for improving user experience, especially on content-rich or interactive applications.

In this article, we'll dive into the latest enhancements Angular has made in the area of hydration, starting with v15 and leading up to the game-changing features introduced in Angular 18 and 19: Incremental Hydration and Event Replay.

The evolution of Hydration in Angular

Angular v15: Full application Hydration support

Angular v15 introduced full support for application hydration, combining SSR with client-side hydration. Here’s how it works: the app is rendered on the server, and the browser receives a fully-rendered HTML page. This reduces the time users wait to see content.

Once the app reaches the client, Angular "wakes up" the JavaScript to make the page interactive. This process greatly improves the initial user experience by speeding up the time it takes for the app to become usable.

Angular v17: Deferred Views with @defer

With Angular v17, developers gained even more control over app performance with deferred views. The new @defer directive lets you load parts of your app only when they’re needed. For example, a component can wait to load until the user scrolls down to it, interacts with it, or based on other conditions.

This method ensures that only the most important parts of the app are loaded right away, saving bandwidth and improving performance.

Angular v18: Event Replay

Angular 18 tackled a common issue: what happens if users try to interact with the app before it’s fully loaded? The solution is Event Replay.

Here’s how it works: if a user clicks a button or types into a form while the app is still hydrating, Angular captures those actions and "replays" them after the necessary parts of the app are ready. This makes sure users don’t feel like their actions are ignored, resulting in a smoother, frustration-free experience.

Angular 19: Incremental Hydration

With Angular 19, the framework takes hydration to the next level with Incremental Hydration, a smarter way to make apps interactive. Instead of hydrating the whole app at once, Angular lets you load and activate parts of your app only when they’re needed.

What is Incremental Hydration?

Incremental Hydration makes parts of your app interactive on demand, rather than all at once. For example:

• The visible parts of your app, like a header or main content, are loaded and shown immediately because they’re rendered on the server.
• The JavaScript for other parts, like a search bar or a detailed product list, is only downloaded and activated when the user interacts with them.

This keeps the app lightweight and responsive, making it feel faster and more efficient.

How does Incremental Hydration work?

Here’s a step-by-step breakdown:

1. Server-Side Rendering (SSR): The app sends pre-rendered HTML to the browser, so users can see the content right away.
2. Hydrate on Demand: JavaScript for individual components is only downloaded and activated when needed.
3. Trigger-Based Activation: Developers can set conditions for when parts of the app should become interactive.

For example, in an e-commerce app:

• The product list is visible immediately because it’s server-rendered.
• The search bar becomes interactive only when the user clicks on it.
• The shopping cart activates when the user hovers over it or adds a product.

How to use Incremental Hydration

1. Enable the feature: Add Incremental Hydration to your app’s configuration:

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

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

1. Set Hydration Triggers: Use the @defer directive to control when components are hydrated:

@defer (hydrate on interaction) {
  <search-bar></search-bar>
}

1. Use different Triggers: Angular provides a variety of triggers to control hydration behavior. Here’s a list of what you can use:

• on idle: Hydrates the component when the browser is idle. This is the default behavior.
• on viewport: Hydrates the component when it comes into view (e.g., when the user scrolls to it).
• on interaction: Hydrates the component when the user interacts with it (e.g., clicks or types).
• on hover: Hydrates the component when the user hovers over it or focuses on it.
• on immediate: Hydrates the component immediately after other non-deferred content has loaded.
• on timer: Hydrates the component after a set delay (e.g., on timer(2s) hydrates after 2 seconds).
• when: Hydrates the component when a specific condition is met (e.g., when userLoggedIn).
• hydrate never: Prevents the component from being hydrated at all, useful for non-interactive content.

You can combine triggers with a semicolon (;) for more flexibility. For example:

@defer (on idle; hydrate on interaction) {
  <my-component></my-component>
}

1. Prevent Hydration for Static Content: For components that don’t need to be interactive, skip hydration entirely:

@defer (hydrate never) {
  <static-content></static-content>
}

Why use Incremental Hydration?

Incremental Hydration offers several benefits:

• Faster Load Times: Only the critical parts of the app are loaded immediately, so users can interact with it sooner.
• Smaller Initial Downloads: Less JavaScript is downloaded upfront, saving bandwidth.
• Better Performance on All Devices: By focusing on only what’s needed, the app works smoothly even on older devices or slower networks.

Event Replay for a Smoother Experience

Event Replay, introduced in Angular 18, works seamlessly with Incremental Hydration. If a user interacts with a component while it’s still loading, Angular saves the action and replays it once the component is ready. This ensures that no user interaction is lost during the loading process.

To enable Event Replay, add it to your configuration:

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

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

Conclusion

Angular’s hydration features have evolved significantly, from full hydration in v15 to the smarter, more efficient Incremental Hydration in v19. These updates give developers powerful tools to build faster, more responsive apps that provide a seamless user experience.

With Incremental Hydration, you can load only what’s needed, when it’s needed, saving time, bandwidth, and resources. It’s an exciting step forward for Angular, and you can start using it today to make your apps more efficient and enjoyable for users.