NextJS中这段代码为何触发Hydration Error？求替代方案

核心原因： #

1. 表格DOM结构不规范：HTML原生表格（tbody/tr/td）有严格的结构要求，tr的直接子元素必须是td或th。如果你的Items数组里的元素不是td/th（比如是div/span或其他组件），浏览器会自动修正这种不规范的结构——比如把非表格元素移出表格外，导致服务端渲染的HTML和客户端Hydrate时的DOM结构完全不一致，直接触发Hydration Error。

2. tr元素使用grid布局的兼容性问题：tr默认是表格布局模型，强行设置display: grid会让浏览器在服务端渲染和客户端Hydrate时的布局解析逻辑出现差异，尤其是在计算元素位置、尺寸时，两边生成的DOM节点属性（比如样式、位置）不匹配，引发Hydration校验失败。

3. Items包含客户端独有逻辑：如果Items里的ReactNode包含了只能在客户端运行的代码（比如直接访问window/document，或者依赖客户端环境的状态），服务端渲染时这些内容会缺失或渲染出不同结果，导致客户端Hydrate时DOM不匹配。

方案1：修正表格结构（推荐，保留原生表格语义） #

确保tr的子元素是合法的td/th，如果Items是内容节点，统一包裹在td里；如果Items本身是多列的td集合，直接去掉grid布局，用表格原生的列布局：

<tbody className={className}>
  {Items.map((Item, index) => (
    <tr key={index} className="items-center">
      {/* 如果Item是单列内容，包裹在td里 */}
      <td>{Item}</td>
      {/* 如果Item是多列td集合，直接渲染 */}
      {/* {Item} */}
    </tr>
  ))}
</tbody>

如果需要自定义列宽，用table-layout: fixed配合td的width属性控制，避免用grid破坏表格结构。

方案2：用div模拟表格布局（适合复杂自定义布局） #

放弃原生表格标签，用div完全自定义布局，避免浏览器自动修正DOM的问题：

<div className={`${className} grid gap-[1px]`} style={{ gridTemplateColumns: columns }}>
  {Items.map((Item, index) => (
    <div key={index} className="grid gap-[1px] items-center" style={{ gridTemplateColumns: columns }}>
      {Item}
    </div>
  ))}
</div>

这种方式完全由你控制DOM结构，不会有表格规范的限制，Hydration时两边结构完全一致。

方案3：处理客户端独有内容 #

如果Items里有客户端专属代码，用客户端渲染包裹组件延迟加载，确保服务端和客户端渲染一致：

// 先写一个客户端专属的包裹组件
function ClientOnly({ children }) {
  const [isClient, setIsClient] = useState(false);
  useEffect(() => setIsClient(true), []);
  return isClient ? children : null;
}

// 然后修改原代码
<tbody className={className}>
  {Items.map((Item, index) => (
    <tr key={index} className="grid gap-[1px] items-center" style={{ gridTemplateColumns: columns }}>
      <ClientOnly>{Item}</ClientOnly>
    </tr>
  ))}
</tbody>

这样服务端渲染时会返回空节点，客户端Hydrate后再渲染实际内容，避免结构不匹配。

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