Gatsby站点刷新联系页时React拼接渲染两个Footer组件内容问题求助

数据老陈

2026-10-1

问题根因

这是典型的Gatsby SSR/SSG hydration不匹配问题，完全符合描述的触发特征：仅线上刷新（走服务端静态HTML加载+客户端hydrate流程）出现，客户端路由跳转无服务端渲染过程所以正常。
用客户端useState控制条件渲染时，服务端生成静态HTML的渲染结果和客户端hydrate阶段的首次渲染结果不一致，且两个Footer组件顶层DOM结构高度相似，React diff算法会复用已有DOM节点，只更新内容不一致的子节点，最终出现两个组件内容拼接的异常。

排查&解决方向

优先替换状态判断逻辑：不要用客户端useState存储isContact状态，直接用Gatsby提供的同构能力判断页面类型：
可以通过页面pageContext传递标识，或者用Gatsby封装的useLocation钩子直接匹配路径，这两个能力在服务端渲染阶段都能拿到正确的当前页面信息，保证前后端渲染判断逻辑完全一致，从根源避免hydration不匹配。
临时快速修复：给两个Footer组件添加唯一key属性，强制React在状态变化时销毁重建整个Footer DOM树，不会复用旧节点：
```
{
  !isContact ? 
  <Footer key="default-footer" /> :
  <FooterContact key="contact-footer" />
}
```
开发环境复现定位：开启React严格模式，本地用开发模式打包测试，React会在控制台抛出明确的hydration不匹配警告，直接定位到差异节点位置。
检查状态更新时机：如果是在useEffect中才修改isContact状态，hydrate阶段首次渲染时状态还是初始值，和服务端渲染结果一致，useEffect执行后状态更新触发重渲染，这时候也会出现节点复用拼接的问题，将判断逻辑提前到渲染阶段即可解决。