- 综合排序
- 最热优先
- 最新优先
- 来自专栏flytam之深入前端技术栈
深入探讨 Web 开发中的预渲染和 Hydration
在本文中，我们将讨论预渲染和 Hydration，以及为什么在构建单页面应用程序时它们是很重要的特性。 通过正确的 Hydration ！ 什么是 Hydration？ Hydration 是为我们的应用程序添加交互性的。它加载使我们的应用程序具有交互性的 JavaScript。 相反，它会选择哪些元素需要更新 预渲染和 Hydration 的实际应用 在预渲染和 Hydration 流程中，首先，用户会看到具有正确内容的 HTML。 然后 Hydration 开始发挥作用，加载 JavaScript 以使应用程序具有交互性。 我们所有的 React 组件将始终在客户端进行 Hydration，即使它们没有必要这样做。
2.1K10编辑于 2024-10-10 - 来自专栏前端开发
SSR 与静态渲染到底怎么选：把 TTFB、Hydration、INP 一次讲透
如果Hydration（把服务端生成的静态HTML变成可交互应用的过程）很重，用户看到内容后依然可能“点了没反应”。 Hydration的设计本身就是一种折中：服务端先给可见内容，客户端再接管并补齐交互能力。 如果客户端还要下载大包、执行大量JS、做重Hydration，主线程会被长任务压住，实验室的TBT会升高，线上INP也更容易变差。 如果你把所有内容都塞进SSR，峰值流量时服务端渲染会变成巨大成本，而且你仍然要面对客户端Hydration的开销，未必比静态方案更“快点得动”。 (web.dev)它的代价也很真实：动态渲染的算力开销、可能变长的TTFB、以及客户端Hydration带来的主线程压力，会直接反映到TBT与INP上。
12300编辑于 2026-04-20 - 来自专栏cc log
卷起来，前端建站SSG，SSR，ISR，Hydration, Island...一网打尽
toc 让建站酷起来 SSR SSG ISR 轮询式刷新 按需刷新 Edge Rendering 酷的“代价” Hydration Selective Hydration Islands Architecture No hydration 没噱头的remix Intro React, Vue, Angular 三足鼎立之后，前端界又开始“卷起来了”，不过战火已经单页渲染蔓延到了服务端渲染建站 NextJs成名已久，功能全面，astro Island 独步天下，qwik No hydration 异军突起。remix 守正出奇，无招胜有招。 今天我们来一块说道说道。 这里实际上就涉及Hydration注水的概念。 Hydration Hydration注水，大家可能较少听到，但是它却是现代前端spa，mpa同构框架的关键。 Selective Hydration 渐进可选式的注水，这里的代表就是大名鼎鼎的React，借助于fiber架构，React能够打断传统递归式的注水，让应用能够优先处理交互事件，这里框架层面比较复杂，
2.3K30编辑于 2022-09-26 - 来自专栏newbe36524的技术专栏
HagiCode 启动页设计：React 19 应用中填补 Hydration 空白期的极致体验
为HagiCode设计12种极致的启动体验：从极简到赛博朋克在React19应用下载和Hydration的短暂间隙，是留给用户感知品牌个性的黄金窗口。 然而，这种架构带来了一个经典的用户体验痛点：当用户访问网页时，浏览器需要先加载HTML，再下载巨大的JSBundle，最后由React执行Hydration（注水）。 本文作者:newbe36524本文链接:https://hagicode-org.github.io/site/blog/2026-02-03-hagicode-react-19-hydration-splash-screen
17310编辑于 2026-02-04 - 来自专栏cc log
卷起来，前端建站SSG，SSR，ISR，Hydration, Island...一网打尽
NextJs成名已久，功能全面，astro Island 独步天下，qwik No hydration 异军突起。remix 守正出奇，无招胜有招。今天我们来一块说道说道。 这里实际上就涉及Hydration注水的概念。HydrationHydration注水，大家可能较少听到，但是它却是现代前端spa，mpa同构框架的关键。 Selective Hydration渐进可选式的注水，这里的代表就是大名鼎鼎的React，借助于fiber架构，React能够打断传统递归式的注水，让应用能够优先处理交互事件，这里框架层面比较复杂，具体效果怎么样也有待观察 --><MyReactComponent client:load />No hydration最快的注水，就是无注水。这就是qwik 框架的主要卖点。
2.3K61编辑于 2022-08-29 - 来自专栏前端小羊
markdown链接解析错误处理
这个错误通常发生在 React 的 服务端渲染（SSR）或静态生成（SSG） 场景中，当组件在 hydration（水合）过程中（即客户端接管渲染时）收到了新的更新（如状态或 props 变化） 状态初始化延迟： 组件在 hydration 后（如 useEffect 中）才初始化状态（如 setState），导致客户端渲染的初始状态与服务端不一致。 路由切换或动态路由： 在动态路由场景中，服务端渲染的页面可能与客户端导航后的路由参数不匹配，导致客户端 hydration 后触发新的数据加载和状态更新。 它允许 React 在 hydration 过程中优先完成服务端渲染的水合流程，再将客户端的更新作为“过渡”处理，避免强制切换渲染模式。 前触发更新 确保组件在 hydration 完成前（即 useEffect 执行前）不触发状态更新。
38510编辑于 2025-08-11 - 来自专栏前端开发
Angular SSR 输出 HTML 之后，浏览器端到底会不会把应用代码再跑一遍
启用Hydration时，Angular会尽量复用SSR的DOM；没启用Hydration时，Angular会销毁并重建DOM，常见表现是短暂闪烁。 Angular官方对Hydration的定义，已经把核心讲透了Angular文档把Hydration定义为：在客户端恢复SSR应用的过程，包括复用服务端DOM、持久化应用状态、把服务端已获取的数据转移到客户端等 (Angular)同时文档也明确指出：如果没有启用Hydration，SSR的Angular应用会销毁并重新渲染DOM，可能造成可见闪烁；启用Hydration可以复用已有DOM，避免闪烁并改善CWV指标 可在Hydration完成前，事件监听器还没挂载。Angular文档因此引入了EventReplay：捕获Hydration前的事件并在Hydration后重放。 (Angular)是否会把SSR生成的DOM整体推倒重来取决于Hydration：未启用Hydration：会销毁并重渲染DOM，可能闪烁(Angular)启用Hydration：尽量复用DOM，只补齐运行时结构与事件系统
9510编辑于 2026-03-31 - 来自专栏嘿嘿的专栏
一起来学 next.js - 关闭 SSR 方案及 hydration 错误的原因和解决方案
今天聊一聊上手 next.js 使用中常会出现的一类报错：hydration fail，估计大部分使用过 next.js 开发的同学对下面的报错信息一定都很熟悉： Error: Hydration failed 报错的原因报错信息中已经说的很清楚：由于 hydration 后的 UI 和服务端渲染的 UI 不一致导致 hydration 失败。 不过虽然报错信息写着 Hydration failed，但实际上还是会以 Hydration 后的 UI 为准的，其实勉强算是 hydration 成功的。 实际场景 下面讲一个实际的场景。 但是在 SSR + hydration 的场景下，React 的 hydration 会检查 UI 的一致性，前后数据不一致就会导致 hydration 错误的发生。 如果对 hydration fail 错误的解决有其它方案的同学欢迎留言。
5.5K40编辑于 2023-05-09 - 来自专栏前端开发
Web 应用 SSR Hydration 阶段的深入拆解：从一张 HTML 快照到真正可交互应用，中间到底发生了什么
一、hydration出现的前提：你已经做了SSR，并且准备在客户端再跑一遍框架把典型的SSR+hydration请求路径压缩成一句话：服务端把UI渲染成HTML发给浏览器，浏览器先显示出来；客户端脚本加载后 三、hydration的内核动作拆解：对齐、复用、接管把hydration想象成“接管一座已经建好的房子”。服务端把墙和门都盖好了（HTML），但电路与智能系统还没装（事件、状态、更新）。 六、性能视角：hydration为什么会伤INP与TBT，以及怎么缓解很多团队做SSR是为了更快的首屏内容展示，但如果hydration代价过高，页面会陷入一种“看起来好了，点起来卡”的状态。 Angular的hydration指南里专门描述了EventReplay：在hydration完成前捕获用户交互，待水合结束后再回放，确保交互不会丢失。 hydration。
9300编辑于 2026-04-20 - 来自专栏前端三元同学
种子轮融资 700 w，Astro 的正式发布给前端界带来了什么？
，无法完成 partial hydration。 Hydration，主要有如下的几个特点: 在完整的 HTML 渲染之前就可以进行组件的 hydrate，而不用等待 HTML 的内容发送完毕 hydration 可中断。 Partial Hydration。 Hydration 没有这个限制。 因此，虽然两者都是在 Hydration 上做文章，但其实是两种完全不同的方案，而且 Partial Hydration 更加通用，限制更少，执行的 JS 更少。
1.6K10编辑于 2022-11-11 - 来自专栏前端开发
Angular SSR Rehydration 的代价：页面看起来就绪，却像卡住了一样
(web.dev)6.3Hydration失败与重建：最糟糕的双倍工作全量hydration还有一个经典坑：服务端渲染的DOM树被客户端销毁又立刻重建，常见诱因是客户端第一次同步渲染时缺了某个还没resolve 7.5从根上看：为什么有人说hydration是纯开销有一派观点更激进：hydration的恢复阶段本质是在客户端重建服务端已经做过的工作，因此是纯开销，尤其在移动端会很贵。 (web.dev)8.4给hydration打点，拿到可对比的数据你可以在客户端入口做简单打点，把hydration完成时间量化出来：展开代码语言：JavaScriptAI代码解释performance.mark ('hydration_start')hydrateApp()queueMicrotask(()=>{performance.mark('hydration_end')performance.measure ('hydration','hydration_start','hydration_end')const[m]=performance.getEntriesByName('hydration')console.log
14410编辑于 2026-04-14 - 来自专栏前端食堂
React 服务器组件：引领下一代 Web 开发潮流
这个称为选择性 hydration 的功能，允许在其余 HTML 和 JavaScript 代码完全下载之前，就对可用的部分进行 hydration。 主内容区的代码加载完成后，就会进行 hydration。 得益于选择性 hydration，即使是体积庞大的 JS 代码也不会阻止页面其他部分变得可交互。 以下是利用 <Suspense> 实现选择性 hydration 的直观展示： 此外，选择性 hydration 解决了第三个问题：“要与任何东西互动，必须对所有东西进行 hydration”。 在多个组件等待 hydration 的情况下，React 会根据用户的交互行为来优先处理 hydration。 侧导航的 hydration 则会稍后进行。
1.4K10编辑于 2024-04-10 - 来自专栏前端技术地图
现代前端框架的渲染模式
React 18 官方支持了渐进式水合（官方叫 Selective Hydration）。 要深入了解 Progress Hydration, 可以看这个视频。 Selective Hydration - 选择性水合 选择性水合（Progressive Hydration） 是 渐进式水合(Progressive Hydration) 和 流式SSR(SSR 比较典型的慢组件是异步数据获取的组件, 如下图，未开启 Selective Hydration 的情况，会等待所有异步任务完成后才开始输出，而 Selective Hydration 可以跳过这些组件， 在客户端 Selective Hydration 的运行过程同 Progressive Hydration 。 关于 Selective Hydration 细节，可以阅读以下文章： New in 18: Selective Hydration New Suspense SSR Architecture in React
1.2K31编辑于 2023-10-20 - 来自专栏前端开发
在 Angular SSR 模式下，ElementRef 究竟能不能用？
Angular会在服务器渲染出首屏HTML，并在浏览器端通过hydration接手。为了让hydration正常匹配，在服务器到浏览器这段过渡中，不能擅自改动DOM结构。 谷歌开发者博客也指出，在hydration之前使用ElementRef、Renderer2或原生DOMAPI去添加、移动、删除节点，会导致不一致，破坏SSR与hydration的协作(ChromeforDevelopers Angular官方的hydration指南同样把直接DOM操作列为会破坏hydration的模式，并给出ngSkipHydration作为无奈时的权宜之计(Angular)。 Hydration的一致性约束SSR输出的HTML要和浏览器端Angular首次渲染的虚拟视图严格匹配。 参考：Chrome开发者博客对hydration前DOM操作的警示、Angular官方hydration与SSR指南、平台判断API文档与社区最佳实践(ChromeforDevelopers)。
8310编辑于 2026-04-26 - 来自专栏前端桃园
React 18 用 createRoot 替换 render
其次，这一变化允许让我们可以移除 hydrate 方法并替换为 root 上的一个选项；删除渲染回调，这些回调在部分 hydration 中是没有意义的。 什么是 hydration ？ 我们已经把 hydrate 函数移到了 hydrateRoot API 上。 from 'App'; const container = document.getElementById('app'); // Create *and* render a root with hydration 如果你想在 hydration 后再次更新 root，你可以将它保存到一个变量中，就像使用 createRoot 一样，然后调用 root.render()： import * as ReactDOM 对于部分 hydration 和渐进式 SSR，这个回调的时间将不符合用户的期望。
3.5K20发布于 2021-09-09 React 19 高薪技术从入门到进阶 - 实战课程- 慕课网
客户端 Hydration 性能瓶颈：React 18 的渐进式 Hydration 仍存在冗余计算问题。 智能 Hydration 优化： 引入选择性 Hydration，仅对交互组件进行 Hydrate，减少主线程阻塞。 支持并行 Hydration，利用 Web Workers 加速交互就绪时间。 高薪岗位技能矩阵职级核心能力要求薪资范围（国内）初级掌握基础 SSR 配置15-25K中级优化 Hydration 性能25-40K高级设计企业级 SSR 架构40-70K专家主导框架级性能优化70K+ 学习路径推荐基础入门：Next.js 14 + React 19 官方文档 进阶实战：手写简易 SSR 框架（理解 Hydration 流程） 企业级优化：性能监控（Lighthouse + Web
58110编辑于 2025-11-25- 来自专栏前端开发
Angular SSR 与 IntersectionObserver：把内容先交付，把交互留给可见性
(Angular)为什么在AngularSSR项目里要认真对待IntersectionObserverSSR让用户几乎立刻看到文本与基础结构；Hydration让这份HTML在浏览器端变得有生命。 Hydration：让直出的DOM以增量方式复用与复活Angular官方的Hydration指南说明，客户端会复用SSR输出的DOM、保留状态并避免闪烁；在现代版本中配合增量/选择性水合，可以让页面不同区域按优先级复活 Hydration文档中的复用直出DOM思想，与deferrableviews的声明式策略形成了清晰的职责边界。 改造为SSR输出整体DOM与静态文本，Hydration结束后，只保留交互必要的卡片即时激活，其他卡片用IO指令可见即绑定。 (Angular)与文档同频：关键参考坐标Angular官方SSR与Hydration指南，覆盖直出、复用与混合渲染模型，帮你把服务器职责与客户端职责拆清楚。
11310编辑于 2026-04-26 - 来自专栏前端开发
Angular SSR 的世界里，IntersectionObserver 不是可有可无的点缀
Angular二、Hydration的舞台：服务端直出与客户端可见性激活的配合Hydration在Angular官方定义里，是指浏览器端复用服务器渲染的DOM、恢复事件与状态的过程。 SSR提前交付了可读HTML，Hydration让这份标记重新拥有交互能力。 SSR把导语与图片、三段的文字骨架全部直出；浏览器开始Hydration，但并不立刻激活三段图表逻辑。 这与Angular官方对Hydration的叙述一脉相承。 迁移到SSR+Hydration后，配合@defer(onviewport)，地图脚本的下载从首包移到用户滚动到对应段落时，首屏JS体积下降显著，站点的LCP与可交互时间更加稳定。
6410编辑于 2026-04-26 - 来自专栏前端精读评论
精读《React 18》
SSR for Suspense 完整名称是：Streaming SSR with selective hydration。 即便 SSR 内容打到了页面上，由于 JS 没有加载完毕，所以根本无法进行 hydration，整个页面处于无法交互状态。 即便 JS 加载完了，由于 React 18 之前只能进行整体 hydration，可能导致卡顿，导致首次交互响应不及时。 hydration 的过程也是逐步的，这样不会导致一下执行所有完整的 js 导致页面卡顿（hydration 其实就是 React 里写的回调注册、各类 Hooks，整个应用的量非常庞大）。 hydration 因为被拆成多部，React 还会提前监听鼠标点击，并提前对点击区域优先级进行 hydration，甚至能抢占已经在其他区域正在进行中的 hydration。
1.8K30编辑于 2022-03-15 - 来自专栏Web Front End
新时代的 SSR 框架破局者：qwik
当 hydration 过程完成后，会由我们的客户端框架接管网站的后续渲染。 hydration 上述过程中有一个非常重要的关键字 hydration（水合）。 首次访问页面时，页面的静态 HTML 是在服务端生成的。 当 JS 脚本下载完成后，会立即执行同时发生一种被称为 hydration 的过程。 针对于上面的概念，我们直接来看看 qwik 中提到的 Hydration is Pure Overhead （完全多余的 Hydration）。 这样做的好处是在 qwki 中完全可以省略 hydration 的多余步骤，甚至可以说完全抛弃了 hydration 的概念。
4K10编辑于 2023-01-09
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号