NextJS Hydration失败求助：服务端与客户端UI不匹配

API 探路者

2026-7-2

NextJS Hydration 错误修复：初始UI与服务端渲染不匹配

报错信息

Error: Hydration failed because the initial UI does not match what was rendered on the server.
Warning: Expected server HTML to contain a matching <h1> in <h3>.

问题根源

你的代码存在HTML语义结构违规：在<h3>标签内部直接嵌套了<h1>标签。HTML规范明确要求标题元素（h1-h6）属于同级层级标签，不能互相嵌套。这种非法结构会导致服务端渲染生成的DOM与客户端Hydration校验时预期的结构不一致，从而触发报错。

具体问题出在app/page.tsx的这段代码：

<h3>{logstate==1 && <h1>LOGGED IN</h1>}</h3>
<h3>{logstate==0 && <h1>LOGGED OUT</h1>}</h3>

修复方案

你可以通过两种方式修正这个问题：

方案1：移除嵌套，调整标题层级

如果需要保留<h1>的标题层级，直接去掉外层的<h3>，改为条件渲染<h1>：

'use server'
import BtnClient from "@components/BtnClient"

const Home: React.FC = async () => {
  const logstate: number = 0;

  return (
    <div>
      <h1>MAIN PAGE: SERVER RENDER</h1>

      {logstate === 1 && <h1>LOGGED IN</h1>}
      {logstate === 0 && <h1>LOGGED OUT</h1>}

      <BtnClient />
    </div>
  );
};

export default Home;

方案2：统一层级，替换内部标签

如果需要保留<h3>的容器，把内部的<h1>替换成普通文本或非标题标签：

'use server'
import BtnClient from "@components/BtnClient"

const Home: React.FC = async () => {
  const logstate: number = 0;

  return (
    <div>
      <h1>MAIN PAGE: SERVER RENDER</h1>

      <h3>{logstate === 1 ? 'LOGGED IN' : 'LOGGED OUT'}</h3>

      <BtnClient />
    </div>
  );
};

export default Home;