Lazy loading and application hydration interact in a complex and often conflicting way, primarily because hydration requires executing application code eagerly, which undermines the benefits of lazy loading.
How Hydration Works and Its Impact on Lazy Loading
Hydration is the process by which a server-rendered HTML page is "activated" on the client side by running JavaScript to attach event listeners, restore component state, and make the page interactive. This process involves executing the application components starting from the root and traversing down the component tree to understand state, bindings, and event handlers.
Because hydration must visit every component in the current render tree to determine if it needs to be interactive, it forces all these components to be loaded and executed eagerly. This means that even if you mark some components for lazy loading, hydration will still cause them to be loaded immediately if they are part of the initial render tree. Hydration is sequential and cannot skip intermediate components to directly hydrate child components, so all parent components must be hydrated first[1][6].
Why Hydration Sabotages Lazy Loading
- Eager Execution: Hydration requires executing all components in the render tree, which prevents lazy loading from deferring the loading of code for these components.
- Component Dependencies: Child components depend on props from parent components, so parents must be hydrated first, forcing a chain of eager loading.
- Event Handlers and State: Hydration must also set up event listeners and restore state, which requires running component code upfront.
- Developer Burden: To achieve lazy loading during hydration, developers must manually manage prefetching and code splitting, which can be complex and error-prone[6][7].
When Lazy Loading Works Despite Hydration
Lazy loading can still be effective for components that are not part of the initial render tree and thus not visited during hydration. Examples include:
- Dialogs or modals that open on user interaction
- Components on different routes that are not rendered initially
In these cases, the components can be truly lazy loaded because hydration does not force their immediate execution[6].
Techniques to Optimize Hydration and Lazy Loading
Some modern frameworks and libraries attempt to optimize this interaction by implementing lazy hydration or selective hydration, where components are hydrated only when needed, such as when they become visible in the viewport:
- Libraries like `next-lazy-hydration-on-scroll` in Next.js allow hydration to be deferred until a component scrolls into view.
- Using the IntersectionObserver API, components can be lazy loaded and hydrated only when they enter the viewport.
- In Vue/Nuxt, lazy hydration techniques and plugins (e.g., `nuxt-lazy-hydrate`) enable hydration to be delayed until the main thread is idle or the component is visible, improving Time to Interactive and First Input Delay metrics[4][5].
Summary
Hydration and lazy loading are fundamentally at odds because hydration requires eager execution of components in the render tree, which prevents lazy loading from deferring code execution. However, lazy loading remains effective for components outside the initial hydration scope. Emerging techniques like lazy hydration aim to reconcile this conflict by deferring hydration itself, improving performance and user experience.
In essence, hydration sabotages lazy loading during the initial page load, but with careful architectural choices and specialized tools, developers can optimize when and how components are hydrated to regain the benefits of lazy loading[1][6][7].
Citations:
[1] https://www.infoq.com/presentations/hydration-lazy-loading/
[2] https://qconsf.com/presentation/oct2023/hydration-and-lazy-loading-are-incompatible
[3] https://github.com/vercel/next.js/discussions/29751
[4] https://www.wisp.blog/blog/lazy-loading-in-nextjs-the-future-of-resource-optimization
[5] https://vueschool.io/articles/vuejs-tutorials/lazy-hydration-and-server-components-in-nuxt-vue-js-3-performance/
[6] https://www.builder.io/blog/hydration-sabotages-lazy-loading
[7] https://www.linkedin.com/posts/misko-hevery-3883b1_lazy-loading-is-like-exercise-everyone-says-activity-7115086933935984641-5oXk
[8] https://www.techtarget.com/searchsoftwarequality/definition/lazy-loading