Next.js页面重载时如何优化会话令牌验证避免登录页闪现？

问题根源分析 #

1. 登录页闪现：当前代码中isUserLoggedIn初始值为false，依赖useEffect在组件挂载后才根据session_key更新状态，导致首次渲染必然先显示登录页，状态更新后才切换到主页面，产生闪现。
2. 存储重置：每次条件渲染（登录/主页面）都会重新渲染CookiesProvider、JsonStoreProvider等全局状态容器，导致内部存储实例被重新初始化，原有数据丢失。

优化方案 #

1. 直接初始化登录状态，避免延迟更新

将isUserLoggedIn的初始值直接设置为!!session_key，无需等待useEffect触发，让组件首次渲染就能判断登录状态：

const Home: React.FC<any> = ({ jsonHydration, contextHydration }) => {
  const [cookies, setCookie] = useCookies(["session_key"]);
  const session_key = cookies.session_key;
  // 直接用cookie值初始化登录状态
  const [isUserLoggedIn, setIsUserLoggedIn] = useState(!!session_key);

  // 保留监听cookie变化的逻辑，应对登录/登出后的状态更新
  useEffect(() => {
    setIsUserLoggedIn(!!session_key);
  }, [session_key]);

  // ... 其余代码不变
};

2. 全局迁移状态Provider，避免重复实例化

将CookiesProvider、JsonStoreProvider、StoresProvider移到_app.tsx中全局包裹，确保整个应用的状态容器只初始化一次，不会因页面组件的条件渲染重置存储：

// pages/_app.tsx
import { CookiesProvider } from 'react-cookie';
import { JsonStoreProvider } from '你的JsonStore路径';
import { StoresProvider } from '你的Stores路径';

function MyApp({ Component, pageProps }) {
  return (
    <CookiesProvider>
      <JsonStoreProvider hydrationData={pageProps.jsonHydration}>
        <StoresProvider hydrationData={pageProps.contextHydration}>
          <Component {...pageProps} />
        </StoresProvider>
      </JsonStoreProvider>
    </CookiesProvider>
  );
}

export default MyApp;

之后简化Home组件，移除内部的重复Provider：

const Home: React.FC<any> = () => {
  const [cookies, setCookie] = useCookies(["session_key"]);
  const session_key = cookies.session_key;
  const [isUserLoggedIn, setIsUserLoggedIn] = useState(!!session_key);

  useEffect(() => {
    setIsUserLoggedIn(!!session_key);
  }, [session_key]);

  useEffect(() => {
    const unloadCallback = (event: { preventDefault: () => void; returnValue: string; }) => {
      event.preventDefault();
      event.returnValue = "";
      return "";
    };
    window.addEventListener("beforeunload", unloadCallback);
    return () => window.removeEventListener("beforeunload", unloadCallback);
  }, []);

  function handleLogin(session_key: number) {
    setCookie("session_key", session_key, { path: "/", maxAge: 3600 });
  }

  return isUserLoggedIn ? <MainLayout /> : <LoginPage onLogin={handleLogin} />;
};

3. 服务端预取登录状态（可选，针对SSR/SSG场景）

如果你的应用使用服务端渲染（SSR），可以通过getServerSideProps在服务端提前获取session_key，直接将登录状态作为props传给组件，彻底消除客户端初始渲染的闪现：

export async function getServerSideProps(context) {
  // 从服务端请求的cookie中获取session_key
  const session_key = context.req.cookies.session_key;
  const isUserLoggedIn = !!session_key;

  // 按需获取hydration数据（保持原有逻辑）
  const jsonHydration = await fetchJsonHydrationData();
  const contextHydration = await fetchContextHydrationData();

  return {
    props: {
      isUserLoggedIn,
      jsonHydration,
      contextHydration,
    },
  };
}

// 修改Home组件接收props中的登录状态
const Home: React.FC<{ isUserLoggedIn: boolean }> = ({ isUserLoggedIn }) => {
  const [cookies, setCookie] = useCookies(["session_key"]);

  useEffect(() => {
    const unloadCallback = (event: { preventDefault: () => void; returnValue: string; }) => {
      event.preventDefault();
      event.returnValue = "";
      return "";
    };
    window.addEventListener("beforeunload", unloadCallback);
    return () => window.removeEventListener("beforeunload", unloadCallback);
  }, []);

  function handleLogin(session_key: number) {
    setCookie("session_key", session_key, { path: "/", maxAge: 3600 });
  }

  return isUserLoggedIn ? <MainLayout /> : <LoginPage onLogin={handleLogin} />;
};

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