Hydration can be considered “activating” a server-side rendered HTML page on the client. Incremental hydration enables this in stages, on demand.
Hydration is an important concept in modern web development, especially in the context of server-side rendered (SSR) applications and improving performance. With Angular 19, the framework introduced incremental hydration, a more advanced approach to hydration that enables finer control over when and how parts of an application become interactive.
In this article, we’ll explore the foundations of hydration and delve into Angular’s latest innovations, particularly incremental hydration.
Within server-side rendered (SSR) apps, hydration can be considered the process of “activating” a server-side rendered HTML page on the client. This means attaching event listeners, restoring application state and reusing server-rendered DOM nodes rather than recreating them. By doing so, hydration avoids redundant rendering, improving performance metrics like First Input Delay (FID), Largest Contentful Paint (LCP) and Cumulative Layout Shift (CLS).
Think of it like receiving a fully assembled piece of furniture. Server-side rendering delivers the assembled product, and hydration is unwrapping and tightening a few bolts to make it ready for use. Without hydration, it’s like discarding the pre-assembled furniture and rebuilding it from scratch—wasteful and inefficient.
While hydration improves performance, traditional approaches have some limitations like the following:
Angular has been iteratively addressing these issues, starting with full-application hydration in Angular 16, deferrable views in Angular 17 and EventReplay in Angular 18. Each of these features laid the groundwork for Angular 19’s incremental hydration.
Incremental hydration builds upon full-application hydration by enabling developers to hydrate parts of an application on demand rather than all at once. This is achieved through the familiar @defer
syntax, where hydration is triggered only when necessary. For example, a component can hydrate:
To enable incremental hydration, we should check that our application already uses SSR and hydration. Then, we can update our bootstrap configuration with the withIncrementalHydration() function:
import {
bootstrapApplication,
provideClientHydration,
withIncrementalHydration,
} from "@angular/platform-browser";
bootstrapApplication(AppComponent, {
providers: [provideClientHydration(withIncrementalHydration())],
});
After enabling, we can use the @defer directive with hydration triggers in our templates:
@defer (hydrate on viewport) {
<shopping-cart/>
}
The above is an example of hydrating a component when it enters the viewport. This means the <shopping-cart>
component will only become interactive when it scrolls into view, conserving resources until needed.
Similarly, we can hydrate a component upon user interaction, providing a placeholder until the component is ready:
@defer (hydrate on interaction) {
<product-details />
} @placeholder {
<div>Loading...</div>
}
For cases where certain components or sections of the page do not require interactivity, Angular provides the option to completely skip hydration on initial render. This is particularly useful for static content, such as footers or purely decorative elements, that don’t benefit from JavaScript activation. We can achieve this with the hydrate never directive:
@defer (hydrate never) {
<static-footer />
}
The above example keeps the <static-footer>
component from ever hydrating, keeping it static content and avoiding unnecessary JavaScript overhead. You can explore more examples of the different hydration triggers in the official Angular documentation.
In Angular 19, incremental hydration combines several key features:
By combining these features, Angular 19 provides a robust solution for optimizing performance and user experience in SSR applications.
Overall, incremental hydration in Angular 19 represents a great advancement in optimizing web application performance. By deferring non-critical JavaScript and hydrating components only when necessary, developers can reduce bundle sizes and improve load times. This approach enhances user experience by preventing layout shifts so that components behave predictably. With the added flexibility of fine-tuned hydration triggers and the ability to exclude static content from hydration with hydrate never
, Angular developers now have more tools to build efficient, responsive applications.
For more details, be sure to check out the following resources below:
Hassan is a senior frontend engineer and has helped build large production applications at-scale at organizations like Doordash, Instacart and Shopify. Hassan is also a published author and course instructor where he’s helped thousands of students learn in-depth frontend engineering skills like React, Vue, TypeScript, and GraphQL.