> 本文为稀土掘金技术社区首发签约文章，30天内禁止转载，30天后未获授权禁止转载，侵权必究！ ## 前言开发 Next.js 项目的时候常会遇到水合错误提示，比如： ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d86bf4bdebd04fde9d9ea1131f8cbd09~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=2204\&h=184\&s=105637\&e=png\&b=f7ecec) ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/90cfea84994f4b2c8eddd3478e338ed1~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=2172\&h=144\&s=42358\&e=png\&b=f7ecec) ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f9874dbc09344d95b5494c77062d3822~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=2180\&h=194\&s=104767\&e=png\&b=f7eded) 具体的错误提示可能不一样，但都会告诉你是水合（Hydration）的时候出现错误。遇到这种错误该怎么解决呢？此外，这还是一道考察 Next.js 的常见面试题。 **通过考察这类常见问题的解决方法，判断面试者是否对日常开发中遇到的问题进行过系统总结和思考。** 所以开始前先点赞收藏下这篇文章吧。 > 1. 本篇已收录到掘金专栏[《Next.js 开发指北》](https://juejin.cn/column/7343569488744611849) > > 2. 系统学习 Next.js，欢迎入手小册[《Next.js 开发指南》](https://s.juejin.cn/ds/iFkbaMgM/)。基础篇、实战篇、源码篇、面试篇四大篇章带你系统掌握 Next.js！欢迎围观[朋友圈](https://yayujs.com)、加入[低调务实优秀中国好青年](https://www.yuque.com/yayu/nice-people/xou8qr)前端社群，一个人走得快，一群人走得远。 ## 错误分析 **所谓水合（Hydration），指的是 React 为预渲染的 HTML 添加事件处理程序，将其转为完全可交互的应用程序的过程。** React 提供了 [hydrateRoot](https://react.dev/reference/react-dom/client/hydrateRoot) 客户端 API，通常搭配 `react-dom/server` 一起使用。先由 `react-dom/server`生成 HTML，再调用 hydrateRoot 为生成的 HTML 进行水合，伪代码如下： ```javascript # 服务端 import { renderToString } from 'react-dom/server'; const html = renderToString(); # 客户端 import { hydrateRoot } from 'react-dom/client'; hydrateRoot(document.getElementById('root'), ); ``` 与我们使用 React 时常用的 createRoot 不同，creatRoot 会重新创建 DOM 节点，而 hydrateRoot 会尽可能复用已有的 DOM 节点。那具体是怎么进行水合的呢？这就要说到 React 的渲染原理了。你可以这样简单粗暴的理解：当调用 hydateRoot 的时候，会传入组件（例子中的 ``），React 会据此构建 React 组件树，并按照组件树的顺序遍历真实的 DOM 树，判断 DOM 树和组件树是否对应，如何对应，则跳过创建 DOM 节点的环节，复用当前 DOM 节点，添加事件并进行关联。所以水合的前提是 DOM 树和组件树渲染一致。而本篇要讲的水合错误就出现在浏览器首次渲染的时候，DOM 节点和水合时的 React 树不一致导致无法正确进行水合。所以这个错误虽然常会出现在 Next.js 项目中，但它本质是 React 的错误，具体是 React-Dom 报的错。那你可能就好奇了，如果正确的传入组件代码，怎么会出现不一致的情况呢？有哪些情况会导致不一致？遇到这些问题该如何解决？为了避免此类错误，日常开发 Next.js 项目的时候要注意哪些点呢？且让我们从常见原因开始说起。 ## 原因 1：HTML 元素错误嵌套第一种原因是 HTML 元素错误嵌套导致，比如在 `

`标签中又嵌套了一个 `

`标签。举个例子： ```jsx export default function App() { return (

text1

text2

) } ``` 这就会导致水合错误： ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/6d478d2556064208a1c03c549044e993~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=2204\&h=184\&s=105637\&e=png\&b=f7ecec) 不过一般 React 还会给出具体的错误提示和导致错误的 HTML 元素位置： ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/bd18a22410d24607a6e79609883b0afd~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=2204\&h=206\&s=58302\&e=png\&b=f7ecec) 这样我们就可以快速定位出现错误的地方。除了 `

`嵌套错误，其他的可能还有： 1. `

` 嵌套在另一个 `

` 元素中 2. `

` 嵌套在 `

` 元素中 3. `

` 元素中 4. 交互式内容（[interactive-content](https://html.spec.whatwg.org/#interactive-content-2)）不能嵌套所谓交互式内容，指的是专门用于用户交互的内容，其实 HTML 中有很多这样的元素，比如 ``、`

{isClient ? 'Client' : 'Server'}

{typeof localStorage !== 'undefined' ? localStorage.getItem("name") : ''}

{+new Date()}

{isClient ? 'Client' : 'Server'}

{name}

{isClient ? 'Client' : 'Server'}

{+new Date()}

{+new Date()}

{+new Date()}

{+new Date()}

{localStorage.getItem("name")}