The Game-Changing Impact of Incremental Hydration in Angular (Part 2/3)
Table of Contents
In Part 1, we introduced incremental hydration in Angular—an advanced feature that optimizes how and when Angular components hydrate on the client. Now, let's dive deeper into why it matters so much for performance and user experience, focusing on its influence on Largest Contentful Paint (LCP), Interaction to Next Paint (INP), and Cumulative Layout Shift (CLS).
Why Incremental Hydration Matters
Boosts LCP: Pre-rendered content arrives faster, giving users something meaningful to see almost immediately.
Improves INP: Deferring of JavaScript execution keeps the main thread available to handle user interactions, reducing delays.
Minimizes CLS: By taking over existing DOM elements rather than replacing them, Angular drastically reduces or eliminates altogether unexpected layout shifts.
These three metrics are part of Core Web Vitals, which collectively measure the user’s perception of loading speed, responsiveness, and visual stability.
LCP impact
LCP measures the time from when a user requests a page to the moment the largest visible piece of content is fully rendered in the viewport. You can think of it as a film strip where each frame represents a rendered state of the page until the largest content element appears.
A typical loading sequence involves:
Requesting the page
Sending the document to the client
Parsing and executing the document
Browser layout
Browser paint
LCP candidates
Final frame
When so much is happening under the hood, it can be challenging to know where to focus your optimizations. One useful approach is an LCP breakdown, which highlights four main sections in the load cycle. Prioritizing improvements within these sections can quickly move the needle on LCP.
How SSR and Incremental Hydration Help
Angular’s server-side rendering, pre-rendering, or incremental site generation can significantly influence how quickly that content comes into view. When Angular executes the application on the server, it ships a fully rendered DOM directly in the served index.html. After the browser parses and renders this static HTML, the Angular app loads and bootstraps just like a typical client-side application. As a result, the user sees content much sooner—even though the overall JavaScript size or scripting time may remain unchanged.
While SSR offers a notable improvement in loading speed, it does come with a couple of potential drawbacks:
Delayed interactivity: Even though the page appears sooner, it may take time for the full app to become interactive and users may experience a delay when first interacting with it.
Potential INP issues: If a user tries to interact while the site is still hydrating, main-thread tasks can block or delay events, resulting in poor INP scores.
This is where incremental hydration comes to the rescue. By deferring the hydration of less-critical components, you can address the above drawbacks head-on, ensuring the main thread remains available for crucial content rendering and user interactions.
INP impact
INP measures interaction latency or, in other words, how quickly a page responds to user inputs—like clicks, taps, or keystrokes—aggregated over time. If the main thread is busy processing other tasks, users may notice a lag between their actions and any visible response.
In the diagram above, the user interacts with the page while the application is still hydrating. Because hydration tasks occupy the main thread, the browser must complete those blocking operations before processing the user’s event, resulting in a delayed response.
The Trinity of Performance Improvement
To fix these latency issues, we can focus on three core strategies or, as I call them, the trinity of performance improvement:
Reduce work
Distribute work
Prioritize work
Incremental hydration embraces these principles by allowing you to display the HTML of unhydrated components initially and defer their JavaScript loading until later. This frees the main to handle user events right away, preventing heavy script execution from blocking immediate interactions.
As visualized above, incremental hydration improves INP in three main ways:
No upfront JS loading for deferred components
No initial hydration overhead for parts of the app the user hasn’t interacted with yet
Reliable interaction processing since the main thread isn’t tied up doing unnecessary tasks
All of this results in a more responsive experience, ensuring users can smoothly interact with your application, even if parts of it are still hydrating in the background.
CLS impact
CLS measures how much the visible content on a page unexpectedly shifts while loading. Frequent or large shifts can be disorienting—imagine clicking a button just as it moves from under your cursor. Traditionally, placeholder elements are used to avoid a blank screen, but these can still lead to sudden jumps if replaced incorrectly.
Compared to @defer, where a placeholder logic is necessary to avoid CLS, with the new hydration syntax, we can now rely on the unhydrated DOM as a stable placeholder. There’s no need to swap in placeholder logic, and a potential CLS can be reduced to 0.
This is due to the fact that Angular now directly takes over the DOM, attaching event listeners and state to components previously rendered on the server without destroying and recreating elements. All user events are recorded and replayed if needed, and no DOM destruction takes place.
This seamless transition results in lower or even zero CLS, delivering a smooth user experience that feels polished and stable from the moment the page appears.
Conclusion
Incremental hydration has a game-changing effect on Angular’s performance story. By pairing SSR with on-demand hydration, you can gain lower LCP, improved INP, and reduced CLS.
In short, incremental hydration sets the stage for smoother, more responsive, and visually stable Angular applications. Stay tuned for Part 3, where we’ll dive into a hands-on developer example, showing you exactly how to implement and fine-tune incremental hydration in an Angular application while applying practical hydration patterns.