如何在React中实现无Hydration错误的权限控制动态导航栏

问题场景 #

使用Zustand管理用户权限状态时，刷新页面会触发Hydration失败错误：

Error: Hydration failed because the initial UI does not match what was rendered on the server.
Warning: Expected server HTML to contain a matching "li" in "ul".

原因是刷新时Zustand store的权限状态（如canDo）会先被清除再重新加载，导致服务端渲染的UI和客户端最终渲染的UI不一致。

正确解决方案 #

1. 使用useEffect配合useState延迟同步状态 #

直接修改变量不会触发React重渲染，必须通过useState管理客户端状态，在组件挂载后同步Zustand的权限值：

import { useState, useEffect } from 'react';
import { useUser } from '@/stores/user';
import Link from 'next/link';

const Navbar = () => {
  const { canDo } = useUser();
  const [isAuthorized, setIsAuthorized] = useState(false);

  useEffect(() => {
    // 组件挂载后再同步权限状态，避开服务端水合阶段
    setIsAuthorized(canDo);
  }, [canDo]);

  return (
    <div>
      <ul>
        {isAuthorized && (
          <li>
            <Link href="/somelink">Something</Link>
          </li>
        )}
        {/* 其他导航项 */}
      </ul>
    </div>
  );
};

export default Navbar;

原理：服务端渲染时isAuthorized初始为false，不会渲染受权限控制的导航项；客户端挂载完成后，通过useEffect同步真实的权限状态，此时更新DOM属于水合后的正常渲染，不会触发不匹配错误。

2. SSR框架下预加载权限状态（以Next.js为例） #

如果使用Next.js等SSR框架，优先在服务端预获取用户权限，确保前后端初始状态一致：

步骤1：在页面组件中预获取权限

// app/page.js
import { getServerSession } from 'next-auth/next';
import { useUser } from '@/stores/user';
import Navbar from '@/components/Navbar';

// 服务端预获取用户会话与权限
export async function getServerSideProps(context) {
  const session = await getServerSession(context.req, context.res, authOptions);
  return {
    props: {
      initialCanDo: session?.user?.canDo || false,
    },
  };
}

export default function Home({ initialCanDo }) {
  const { setCanDo } = useUser();
  
  useEffect(() => {
    // 初始化Zustand的权限状态
    setCanDo(initialCanDo);
  }, [setCanDo, initialCanDo]);

  return <Navbar />;
}

步骤2：在Navbar中直接使用Zustand状态

此时服务端和客户端的初始权限状态一致，水合时不会出现UI不匹配：

import { useUser } from '@/stores/user';
import Link from 'next/link';

const Navbar = () => {
  const { canDo } = useUser();

  return (
    <div>
      <ul>
        {canDo && (
          <li>
            <Link href="/somelink">Something</Link>
          </li>
        )}
        {/* 其他导航项 */}
      </ul>
    </div>
  );
};

export default Navbar;

3. 动态导入禁用SSR（适合非SEO敏感的导航项） #

如果某些导航项不需要服务端渲染，可以用Next.js的dynamic导入禁用SSR：

// components/Navbar.js
import dynamic from 'next/dynamic';

// 禁用SSR，仅在客户端渲染授权链接
const AuthorizedLink = dynamic(() => import('../components/AuthorizedLink'), {
  ssr: false,
  loading: () => null, // 加载时显示空内容
});

const Navbar = () => {
  return (
    <div>
      <ul>
        <AuthorizedLink />
        {/* 其他导航项 */}
      </ul>
    </div>
  );
};

export default Navbar;

// components/AuthorizedLink.js
import { useUser } from '@/stores/user';
import Link from 'next/link';

export default function AuthorizedLink() {
  const { canDo } = useUser();
  return canDo ? (
    <li>
      <Link href="/somelink">Something</Link>
    </li>
  ) : null;
}

原理：禁用SSR后，该组件只会在客户端渲染，完全避开服务端水合阶段的状态差异问题。

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