懒惰的加载和应用水合作用以复杂且通常是冲突的方式相互作用，主要是因为水合需要急切地执行应用程序代码，这破坏了懒惰加载的好处。
##水合如何工作及其对懒惰加载的影响
水合是通过运行JavaScript来附加事件侦听器，还原组件状态并使页面交互式通过运行JavaScript来“激活”服务器渲染的HTML页面的过程。此过程涉及从根开始并沿着组件树横穿以了解状态，绑定和事件处理程序的应用程序组件。
因为水合必须访问当前渲染树中的每个组件，以确定它是否需要交互式，所以它迫使所有这些组件都急切地加载和执行。这意味着，即使您标记了一些懒惰加载的组件，如果它们是初始渲染树的一部分，水合仍然会立即加载它们。水合是顺序的，不能跳过中间成分直接水合儿童成分，因此所有父成分都必须先进行水合[1] [6]。
##为什么水合破坏懒负荷
- 急切的执行：水合需要执行渲染树中的所有组件，这防止懒惰加载这些组件的代码加载。
- 组件依赖性：子组件取决于父母的支柱，因此必须先对父母进行水合，从而迫使一系列急切的负载。
- 事件处理程序和状态：水合还必须设置事件侦听器并恢复状态，这需要预先运行组件代码。
- 开发人员负担：为了在水合过程中实现懒惰的负载，开发人员必须手动管理预取预约和代码分裂，这可能是复杂且容易出错的[6] [7]。
##当懒惰加载时，尽管有水分工作
对于不属于初始渲染树的一部分并且在水合过程中未访问的组件仍然可以有效。示例包括：
- 在用户互动上打开的对话或模态
- 最初未渲染的不同路线上的组件
在这些情况下，组件可以真正懒惰，因为水合不会迫使其立即执行[6]。
##技术优化水合和懒惰加载
一些现代框架和图书馆试图通过实施懒惰的水合或选择性水合来优化这种相互作用，在需要时，组件仅在需要时进行水合，例如它们在视口上可见时：
- 诸如Next.js中的“下一个懒惰 - 水合”之类的库可以将水合推迟到零件滚动浏览为止。
- 使用IntersectionObserver API，只有在进入视口时才能懒惰和水合组件。
- 在VUE/NUXT中，懒惰的水合技术和插件(例如，``nuxt-lazy-hydrate'')能够延迟水合，直到主螺纹闲置或可见，以提高交互式的时间，并提高了交互式的时间和首次输入延迟量指标[4] [4] [5]。
＃＃ 概括
水合和懒惰的负载从根本上是偶然的，因为水合需要急切地执行渲染树中的组件，这防止了懒惰的加载，从而无法延迟代码执行。但是，对于初始水合范围之外的组件，懒负荷仍然有效。诸如Lazy Hydration之类的新兴技术旨在通过推迟水合本身来调和这一冲突，从而提高性能和用户体验。
从本质上讲，水合在初始页面负载期间破坏了懒惰的负载，但是通过仔细的体系结构选择和专业工具，开发人员可以优化何时以及如何水合组件以恢复懒惰加载的好处[1] [6] [7]。
引用：
[1] https://www.infoq.com/presentations/hydration-lazy-loading/
[2] https://qconsf.com/presentation/oct2023/hydration-and-lazy-loading-loading-are-compatible
[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-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-lazy-is-like-eccise-ecercise-everyone-says-activity-711508693939393935984641-5oxk
[8] https://www.techtarget.com/searchsoftwarequality/definition/lazy-loading