Next.js Hydration失败求助：初始UI与服务端渲染不匹配

问题核心原因 #

服务端渲染阶段无法访问浏览器的localStorage，导致服务端渲染Navbar时currentUser为null，渲染出的是Login链接；但客户端Hydration阶段会从localStorage读取用户信息，将DOM替换为Logout按钮，两者结构不匹配，触发Hydration失败。

具体解决方案 #

方法一：用useEffect延迟客户端状态同步 #

在组件中通过useEffect确保仅客户端渲染时，将localStorage中的用户信息同步到Redux，保证服务端与客户端初始渲染的DOM一致，后续再更新状态。

修改后的Navbar代码示例：

import { useSelector, useDispatch } from 'react-redux';
import { useRouter } from 'next/router';
import { logout, setCurrentUser } from '../store/userSlice';
import Link from 'next/link';
import { useEffect } from 'react';

export default function Navbar() {
  const currentUser = useSelector((state) => state.user.currentUser);
  const dispatch = useDispatch();
  const router = useRouter();

  useEffect(() => {
    // 仅客户端执行，同步localStorage中的用户状态
    const storedUser = localStorage.getItem('currentUser');
    if (storedUser) {
      dispatch(setCurrentUser(JSON.parse(storedUser)));
    }
  }, [dispatch]);

  const handleLogout = () => {
    localStorage.removeItem('currentUser');
    dispatch(logout());
    router.push('/login');
  };

  return (
    <>
      <section>
        <div>
          <div>
            <Link href="/">Home</Link>
          </div>
          <div>
            {currentUser ? (
              <button onClick={handleLogout}>Logout</button>
            ) : (
              <Link href="/login">Login</Link>
            )}
          </div>
        </div>
      </section>
    </>
  );
}

方法二：让Navbar仅在客户端渲染 #

利用Next.js的dynamic导入，禁用该组件的服务端渲染，彻底避免服务端与客户端DOM不匹配的问题。

在导入Navbar的页面/组件中修改：

import dynamic from 'next/dynamic';

// 禁用服务端渲染，仅客户端加载Navbar
const Navbar = dynamic(() => import('./Navbar'), { ssr: false });

方法三：统一服务端与客户端的初始状态 #

如果项目使用服务端数据获取方法（如getServerSideProps），可以从服务端的Cookie中读取用户状态（而非依赖客户端localStorage），同步到Redux后再渲染页面，保证两端初始状态一致。

示例（页面的getServerSideProps）：

export async function getServerSideProps(context) {
  // 从服务端Cookie读取用户信息
  const currentUser = context.req.cookies.currentUser ? JSON.parse(context.req.cookies.currentUser) : null;
  return {
    props: { initialCurrentUser: currentUser },
  };
}

随后在MyApp中将initialCurrentUser同步到Redux，确保服务端渲染时使用正确的用户状态。

内容的提问来源于stack exchange，提问作者Gopal Krushna Sahoo