技术与测试 深入了解 C · 行业惯例 平台: 网页

Hydration

Hydration(接入客户端行为)

Hydration 是把浏览器端的行为和状态,接到服务端或构建流程已做好的 HTML 上,让指定的页面区块可以交互。

看看怎样运作
也有人这样说 HydrationHydration(接入客户端行为)

看看怎样运作

原创情境示例Hydration(接入客户端行为)

另一个例子

服务端先发送商品卡,其中只有购物车控件需要交互。只有购物车区块加载 JavaScript,并沿用页面上已有的 DOM;如果全部 HTML 都在浏览器里生成,那是客户端渲染,不是 Hydration。

主要部分

  1. 01已有渲染标记
  2. 02客户端模块
  3. 03状态接合

什么时候用

浏览器端的交互行为会接到已经渲染好的 HTML 上时,可以使用这个词。

什么时候不要用

如果静态内容不需要浏览器交互,也没有会变化的状态,就不必进行 Hydration。

代码里的名称

rendered HTML + client module → interactive island

上线前要检查

检查程序运行环境与版本、集成边界、依赖与许可,以及支持的平台。验证安全、失败处理、性能与监控。也要检查部署、支持负责人、升级路径与恢复上一版的方法。

可以直接复制的需求

预期结果:把 Hydration(接入客户端行为) (Hydration) 当作团队能维护的技术基础,并检查它是否符合产品需求。 用户场景:服务端先发送商品卡,其中只有购物车控件需要交互。只有购物车区块加载 JavaScript,并沿用页面上已有的 DOM;如果全部 HTML 都在浏览器里生成,那是客户端渲染,不是 Hydration。 技术或工程概念:Hydration(接入客户端行为) (Hydration)。 适用理由:浏览器端的交互行为会接到已经渲染好的 HTML 上时,可以使用这个词。 不应使用的情况:如果静态内容不需要浏览器交互,也没有会变化的状态,就不必进行 Hydration。 工程适配:定义程序运行环境与版本。说明它负责什么、接口、数据流、依赖、支持平台、安全与性能限制,以及如何接入现有技术组合。 生命周期防护:检查依赖是否健康、许可是否可用。加入监控与安全备用做法,并指定升级负责人。没有可衡量的好处时,不要再加入功能重复的框架或工具。 验收标准:用最小集成证明必要行为。测试兼容性、安全性、失败与性能。记录部署、升级、支持与恢复上一版的方法。 证据与限制(证据边界):没有一份官方标准能涵盖全部内容。不同团队、平台或框架的用法可能不同。 待确认:现有技术组合、运行环境、版本规则、目标平台和依赖负责人。也要确认性能预算、支持期限与迁移限制。

检查这份需求

请 AI 编程助手检查当前如何使用 Hydration(接入客户端行为) (Hydration)。 定义:Hydration 是把浏览器端的行为和状态,接到服务端或构建流程已做好的 HTML 上,让指定的页面区块可以交互。 生产环境检查:检查程序运行环境与版本、集成边界、依赖与许可,以及支持的平台。验证安全、失败处理、性能与监控。也要检查部署、支持负责人、升级路径与恢复上一版的方法。 修改程序前,先列出看到的证据、缺口、严重程度,以及最小且安全的修正。

C
这个术语有多正式?

行业惯例

工作中经常会用到这个术语。列出的来源可能说明用法或限制,但不会定义全部内容。

没有一份官方标准能涵盖全部内容。不同团队、平台或框架的用法可能不同。

适用范围
只包含来源有说明的内容:正式名称、定义、平台 API、实现、使用指南
文档状态
稳定
核验日期
2026-07-30

证据来源与适用范围

正式来源 + 术语参考资料 · Astro · 稳定 Islands architecture 适用范围: 正式名称、定义、平台 API、实现、使用指南 本页用途: 直接术语参考 来源涵盖内容: 正式名称, 定义, 平台 API, 实现, 使用指南 正式来源 · React · 稳定 createRoot 适用范围: 正式名称、定义、平台 API、实现、使用指南 本页用途: 提供背景,不是正式定义 来源涵盖内容: 正式名称, 定义, 平台 API, 实现, 使用指南

自行复制

浏览器无法自动复制。请选择下方文字,再自行复制。