Next.js多路径条件渲染组件触发服务端HTML不匹配警告如何解决

问题根因 #

这个警告是SSR Hydration 不匹配导致的：
Next.js 服务端渲染阶段，Router.router 实例不存在，此时你读取的currentPath为undefined，服务端输出的sub-bar容器内部是空内容；但客户端首次渲染时立刻能拿到路由信息，渲染了对应的搜索组件，服务端和客户端输出的HTML结构不一致，就触发了React的hydration校验警告。

解决方案 #

方案1：等待客户端挂载完成后再渲染搜索栏 #

优先推荐这个方案，通过标记客户端挂载状态，保证服务端和客户端首次渲染的结构完全一致，避免不匹配问题：

import { useRouter } from 'next/router'
import { useState, useEffect } from 'react'

// 组件内部逻辑
const router = useRouter()
const [isClientMounted, setIsClientMounted] = useState(false)

// 客户端挂载完成后触发更新
useEffect(() => {
  setIsClientMounted(true)
}, [])

let searchbar = null
if (isClientMounted) {
  if (router.route === '/baseballcards') {
    searchbar = <SearchBaseballCards />
  } else if (router.route === '/products') {
    searchbar = <Search />
  }
}

return (
  <div className="sub-bar">
    {searchbar}
  </div>
)

注意不要直接使用全局的Router.router读取路由，应该通过useRouter hook 拿到响应式的路由实例，避免路由切换时组件不更新的问题。

方案2：页面级植入搜索栏 #

如果你的项目用了嵌套布局，可以给/products和/baseballcards两个页面单独配置头部插槽，直接在对应页面组件内引入搜索栏，不需要在全局头部做条件判断，从根源上规避hydration不匹配的问题，逻辑也更内聚。

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