Next.js Vercel项目Hydration失败问题咨询

1. 预渲染与浏览器渲染的React树为何会有差异？浏览器为何不能直接复用初始内容？ #

预渲染和浏览器渲染的React树出现差异，常见原因有这几种：

• 依赖浏览器专属API：服务器端没有window、document这类浏览器环境独有的对象，如果组件在顶层直接调用这些API（比如const width = window.innerWidth），服务器渲染时要么报错，要么拿到undefined，和浏览器实际渲染的内容完全不同，直接导致树结构差异。
• 动态内容不一致：如果组件里用到了时间戳、随机数，或者依赖服务器和浏览器不一致的环境变量，服务器生成的内容和浏览器渲染的自然会有区别。
• 条件渲染依赖客户端状态：比如组件根据localStorage、cookie做条件渲染，但服务器端拿不到客户端的localStorage，或者获取到的cookie和客户端不一致，导致服务器渲染的分支和浏览器不一样。
• HTML结构不规范：服务器渲染出的HTML如果有未闭合标签、错误嵌套（比如在<p>里放<div>），浏览器会自动修正DOM结构，这就会和React预期的虚拟DOM树不匹配。

至于浏览器为什么不能直接复用初始内容——React的Hydration机制不是简单复用现成的DOM，而是要在虚拟DOM和真实DOM之间建立一一对应的映射关系，后续才能通过对比虚拟DOM来高效更新页面。如果初始的虚拟DOM（服务器生成）和真实DOM（浏览器解析后的结构）不匹配，这个映射关系就会错乱，后续的更新逻辑全都会出问题，所以React会直接抛出错误，甚至重新渲染整个组件树。

2. 如何查看React树与DOM的结构差异以调和？ #

可以用这些方法定位差异：

• 用React DevTools排查：打开React DevTools，开启「Highlight Updates」功能，Hydration过程中重新渲染的组件往往就是问题所在。另外在「Components」面板里，对比服务器渲染和客户端渲染的组件props、状态，看哪里不一样。
• 对比服务器HTML和浏览器DOM：右键页面选「查看页面源代码」，复制服务器输出的原始HTML；再在DevTools的「Elements」面板复制当前DOM结构，用文本对比工具（比如本地的diff工具）找出标签、属性、文本内容的差异。
• 逐步禁用SSR缩小范围：用Next.js的dynamic导入组件时设置ssr: false，或者把客户端专属逻辑放到useEffect里，逐个排查怀疑的组件，看哪个组件改成客户端渲染后错误消失，就能锁定问题点。
• 打印渲染内容：在组件的return前，分别在服务器端和浏览器端打印渲染的JSX结构（服务器用console.log，浏览器也打印），直接对比输出内容，找出不一样的地方。

错误栈信息 #

Unhandled Runtime Error
Error: Hydration failed because the initial UI does not match what was rendered on the server.

See more info here: https://nextjs.org/docs/messages/react-hydration-error

Call Stack
throwOnHydrationMismatch
node_modules/react-dom/cjs/react-dom.development.js (12507:0)
tryToClaimNextHydratableInstance
node_modules/react-dom/cjs/react-dom.development.js (12520:0)
updateHostComponent
node_modules/react-dom/cjs/react-dom.development.js (19902:0)
beginWork
node_modules/react-dom/cjs/react-dom.development.js (21618:0)
HTMLUnknownElement.callCallback
node_modules/react-dom/cjs/react-dom.development.js (4164:0)
Object.invokeGuardedCallbackDev
node_modules/react-dom/cjs/react-dom.development.js (4213:0)
invokeGuardedCallback
node_modules/react-dom/cjs/react-dom.development.js (4277:0)
beginWork$1
node_modules/react-dom/cjs/react-dom.development.js (27451:0)
performUnitOfWork
node_modules/react-dom/cjs/react-dom.development.js (26557:0)
workLoopSync
node_modules/react-dom/cjs/react-dom.development.js (26466:0)
renderRootSync
node_modules/react-dom/cjs/react-dom.development.js (26434:0)
performConcurrentWorkOnRoot
node_modules/react-dom/cjs/react-dom.development.js (25738:0)
workLoop
node_modules/scheduler/cjs/scheduler.development.js (266:0)
flushWork
node_modules/scheduler/cjs/scheduler.development.js (239:0)
MessagePort.performWorkUntilDeadline
node_modules/scheduler/cjs/scheduler.development.js (533:0)

内容的提问来源于stack exchange，提问作者matethathelpsyoutrade