Vue Academy · 课时

延迟 Hydration 策略

hydrateOnIdle()、hydrateOnVisible()、hydrateOnInteraction()——Nuxt 懒 Hydration

延迟 Hydration 策略 是 CoddyKit 上的免费 Vue Academy 课时。这是第 4 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 Vue Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Vue Academy 课程共包含 4 节课。

水合成本问题

SSR 会发送可以直接查看的 HTML，但客户端仍然必须对每个组件进行水合，才能使其具备交互能力。预先对所有内容进行水合会阻塞主线程，并延迟交互能力（TTI）。

延迟（惰性）水合会等到组件确实需要时再进行水合。

Nuxt 自动 Lazy 前缀

在 Nuxt 中，为组件添加 Lazy 前缀会使其以延迟方式导入。结合水合策略后，JavaScript 下载和水合工作都可以延后。

<template>
  <!-- Nuxt resolves LazyMyComponent automatically -->
  <LazyMyComponent />
</template>

hydrateOnVisible

hydrateOnVisible 只有在组件滚动进入视口时才会对其进行水合，其底层使用了 IntersectionObserver。这非常适合首屏以下的区域。

<template>
  <!-- Nuxt syntax: hydrate when visible -->
  <LazyProductReviews hydrate-on-visible />
</template>

<!-- core Vue equivalent -->
<!-- defineAsyncComponent({ hydrate: hydrateOnVisible() }) -->

带边距的 hydrateOnVisible

您可以传入 IntersectionObserver 选项，让水合在元素可见之前稍早开始，从而使体验更加流畅。

<template>
  <!-- start hydrating 100px before entering viewport -->
  <LazyComments
    :hydrate-on-visible="{ rootMargin: '100px' }"
  />
</template>

hydrateOnIdle

hydrateOnIdle 会通过 requestIdleCallback 等待浏览器空闲后再进行水合。请将它用于非关键组件，以免它们与初始交互争夺资源。

<template>
  <!-- hydrate during idle time -->
  <LazyNewsletterSignup hydrate-on-idle />

  <!-- optional max timeout in ms -->
  <LazyChatBubble :hydrate-on-idle="3000" />
</template>

hydrateOnInteraction

hydrateOnInteraction 会延迟水合，直到元素上触发指定的 DOM 事件（点击、聚焦或鼠标悬停）。在用户进行交互之前，该组件会保持为静态 HTML。

<template>
  <!-- hydrate only on click -->
  <LazyDropdownMenu hydrate-on-interaction="click" />

  <!-- multiple events -->
  <LazyTooltip :hydrate-on-interaction="['focus', 'mouseover']" />
</template>

hydrateOnMediaQuery

hydrateOnMediaQuery 只有在媒体查询匹配时才会进行水合——例如，可以对仅限桌面端的侧边栏进行水合，而该侧边栏在移动设备上处于隐藏状态，从而避免在小屏幕上浪费资源。

<template>
  <!-- only hydrate on wide screens -->
  <LazyDesktopSidebar
    hydrate-on-media-query="(min-width: 1024px)"
  />
</template>

Vue 核心 API：水合辅助函数

在 Nuxt 之外，同样的策略以水合辅助函数的形式存在，并传递给 defineAsyncComponent 的 hydrate 选项。Nuxt 前缀只是这些辅助函数的便捷写法。

import { defineAsyncComponent, hydrateOnVisible } from 'vue'

const LazyChart = defineAsyncComponent({
  loader: () => import('./Chart.vue'),
  hydrate: hydrateOnVisible()
})

选择合适的策略

请根据目标匹配策略：

可见时 — 首屏以下的内容（评论、页脚）
空闲时 — 后台组件（数据分析、新闻订阅）
交互时 — 由用户操作显示的界面（菜单、模态框）
媒体查询 — 特定设备的界面

需要注意的权衡

延迟水合可以改善 TTI，但这意味着组件在触发条件发生之前无法交互。对于基于交互的策略，第一次点击会被消耗来触发水合，因此可能会感觉略有延迟。请将即时水合保留给主要的行动号召界面。

与岛屿架构结合

延迟水合与岛屿架构相结合：页面的大部分内容是静态服务器渲染的 HTML，只有交互式岛屿才会根据策略延迟进行水合。这样既能将客户端 JS 减至最少，又能在需要的地方实现快速交互。

<template>
  <StaticArticle />            <!-- never hydrates -->
  <LazyCommentBox hydrate-on-visible />
  <LazyLikeButton hydrate-on-interaction="click" />
</template>

快速检查

请检验您对水合策略的理解。

回顾

您学到了延迟水合：

Nuxt 的 Lazy 前缀会延迟导入组件
hydrateOnVisible — 通过 IntersectionObserver 处理首屏以下的内容
hydrateOnIdle — 非关键内容在空闲时间处理
hydrateOnInteraction — 由事件触发（点击/聚焦）
Vue 核心将这些功能作为 defineAsyncComponent 上的 hydrate 辅助函数提供

常见问题解答

「延迟 Hydration 策略」课时是免费的吗？

是的 — 「延迟 Hydration 策略」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Vue Academy 课程的其余内容，请升级到 CoddyKit PRO。 Vue Academy 课程共包含 4 节课。

「延迟 Hydration 策略」这节课中我会学到什么？

hydrateOnIdle()、hydrateOnVisible()、hydrateOnInteraction()——Nuxt 懒 Hydration 你通过在浏览器中直接运行的动手代码来练习 Vue Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 Vue Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 Vue Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 4 节课，共 4 节。

「延迟 Hydration 策略」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 Vue Academy 课中编写并运行代码吗？

能。每节 Vue Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 Vue Academy