解决Next.js中使用Context值时的Hydration错误

Hydration错误的核心原因是服务端渲染的DOM结构与客户端首次hydrate生成的DOM结构不一致，结合你的代码场景，以下是针对性的解决方案：

1. 统一UserContext的服务端与客户端初始状态 #

服务端没有localStorage，如果直接在Context初始化时从localStorage读取用户状态，会导致服务端渲染时user为false，客户端首次渲染时却读取到缓存值，触发结构不匹配。

修改你的UserContext Provider，确保初始状态在两端一致，在客户端hydrate完成后再加载缓存：

import { createContext, useState, useEffect } from 'react';

const UserContext = createContext({
  user: false,
  setUser: () => {},
});

export function UserProvider({ children }) {
  // 服务端与客户端初始状态统一为false
  const [user, setUser] = useState(false);

  // 仅在客户端hydrate完成后，从localStorage加载缓存的用户状态
  useEffect(() => {
    const savedUser = localStorage.getItem('userValues');
    if (savedUser) {
      setUser(JSON.parse(savedUser));
    }
  }, []);

  return (
    <UserContext.Provider value={{ user, setUser }}>
      {children}
    </UserContext.Provider>
  );
}

2. 确保客户端专属逻辑仅在客户端执行 #

服务端无法访问firebase.auth()和window对象，若登录逻辑在服务端渲染阶段执行，会导致两端状态不一致。修改LoginPage的登录函数，增加客户端环境判断：

export default function LoginPage() {
    let [status, setStatus] = React.useState(false);
    const {setUser} = React.useContext(UserContext);

    function loginUser (uid){
        // 仅在客户端执行firebase相关逻辑
        if (typeof window !== 'undefined' && firebase.auth().currentUser) {
            firebase.auth().currentUser.getIdToken()
                .then(idToken => {
                    (async () => {
                        var res = await fetch(`${serverUrl}/account/login/${uid}`, {
                            method: 'GET',
                            headers: {'Authorization': idToken}
                        });
                        var data = await res.json();
                        let user_data = data[0]
                        if (user_data) {
                            let userValues = {
                                uid: user_data.uid,
                                name: user_data.name,
                            }
                            setUser(userValues);
                            localStorage.setItem('userValues', JSON.stringify(userValues));
                            alert(`Bienvenido ${user_data.name}`);
                            setStatus(true);
                        } else {
                            alert('No se encontró la cuenta')
                        }
                    })()
                })
        }
    }

    // 组件渲染代码...
}

3. 减少NavBar渲染结构的差异 #

当用户登录/未登录时，NavBar的DOM结构差异过大，也可能触发hydration错误。给两个状态分支添加统一的容器和唯一key，降低结构差异：

export default function NavBar() {
    const {user, setUser} = React.useContext(UserContext);
    const logout = () => {
        setUser(false);
        localStorage.removeItem('userValues');
    }

    const renderUserSession = ()=>{
        if (user) {
            return (
                <span key="logged-in">
                    Usuario: {user.name} 
                    <Link href="/">
                        <button onClick={logout}>Cerrar sesión</button>
                    </Link>
                </span>
            )
        } else {
            return (
                <span key="logged-out">
                    <Link href="/account/login">
                        <button>Iniciar sesión</button>
                    </Link>
                </span>
            )
        }
    }

    // 组件渲染代码...
}

4. 临时方案：禁用NavBar的SSR（不推荐） #

如果以上方法无法快速解决，可以用Next.js的dynamic导入禁用NavBar的服务端渲染，避免hydration冲突，但会损失SSR性能优势：

import dynamic from 'next/dynamic';

// 仅在客户端渲染NavBar
const NavBar = dynamic(() => import('../components/NavBar'), { ssr: false });

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