[toc]

水合错误

水合是指客户端渲染时，React 会尝试重用服务端渲染生成的 HTML 结构，然后在其上进行事件绑定和状态恢复，以提高性能和用户体验。但是，如果客户端渲染时发现与服务器端渲染的 HTML 结构不匹配，就会导致水合误。

通常，这种问题是由于在客户端与服务端之间的组件渲染结果不一致所引起的，可能的原因包括：

1. 在客户端和服务端渲染时，组件的状态或属性发生了变化，导致生成不同的 HTML 结构。
2. 在客户端渲染时，组件的 DOM 结构被修改或重置，与服务器端渲染的 DOM 结构不匹配。

解决方法

1. 检查组件代码： 检查报错的组件及其父组件的代码，确保在客户端和服务器端渲染时生成的 HTML 结构是一致的。特别要注意条件渲染、数据加载等可能引起不一致的地方。

2. 避免直接操作 DOM： 如果在客户端渲染时进行了直接操作 DOM 的操作，可能会导致水合失败。尽量使用 React 提供的 API 来更新状态和属性，避免直接修改 DOM。

3. 使用相同的数据源： 确保在客户端和服务器端渲染时使用相同的数据源，避免客户端重新请求数据导致不一致。

4. 检查异步数据加载： 如果组件在客户端渲染时依赖于异步加载的数据，确保在客户端和服务器端渲染时数据加载方式一致。

   import dynamic from 'next/dynamic';
   
   const ProLayout = dynamic(import('common/layouts'), {
     ssr: false,
   });