React 18.3.1 SSR文本节点拆分引发Hydration错误求助

问题本质 #

服务器端渲染出的是单个合并文本节点 "count is 0"，但客户端编译后的JSX生成了两个独立文本节点：["count is ", 0]。React的hydration过程会严格校验服务器输出的DOM结构与客户端首次渲染的虚拟DOM结构，哪怕最终文本内容看起来一致，文本节点的拆分方式不同也会触发不匹配警告。

解决方法 #

方法一：统一文本节点结构（推荐）

修改JSX，将静态文本与变量合并为单个表达式，确保客户端和服务器端生成的文本节点结构一致：

function App() {
    const [count, setCount] = useState(0);
    return <button onClick={() => setCount(count + 1)}>{`count is ${count}`}</button>;
}

这样编译后的JSX会生成单个文本节点，与服务器端渲染的DOM结构完全匹配，hydration时就不会触发警告。

方法二：强制服务器端生成拆分的文本节点

如果需要保留拆分的文本节点写法，确保服务器端渲染时也生成和客户端一致的拆分结构（比如服务器端使用相同的JSX编译逻辑渲染，而非模板引擎合并文本）。不过这种方式复杂度更高，一般不推荐。

补充说明 #

React的hydration不是简单的内容对比，而是结构优先的校验机制。服务器输出的DOM树必须和客户端首次渲染的虚拟DOM树完全对齐，包括节点类型、数量、顺序，甚至文本节点的拆分方式都要一致，否则就会触发不匹配警告，严重时可能导致hydration失败、交互异常。

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