如何在Next.js App Router中实现渲染前设置Context？

方法1：服务端预验证（适配SSR/SSG框架，如Next.js） #

如果你的项目用Next.js这类支持服务端渲染的框架，可以在页面的服务端逻辑里提前完成token验证，把登录状态作为初始值传入AuthContext，客户端渲染时直接用正确的状态，从根源避免闪烁。

以Next.js为例：

• 在页面组件的getServerSideProps（或getInitialProps）中，读取请求里的cookie（refreshToken通常存在cookie里），向后端发起验证请求。
• 将验证得到的登录状态作为props传给页面，再在AuthContext Provider初始化时用这个props作为初始状态。

示例代码：

// pages/_app.js
import AuthContext from '../contexts/AuthContext';

function MyApp({ Component, pageProps, initialAuthState }) {
  return (
    <AuthContext.Provider value={{ ...initialAuthState }}>
      <Component {...pageProps} />
    </AuthContext.Provider>
  );
}

export async function getServerSideProps(context) {
  const refreshToken = context.req.cookies.refreshToken;
  let initialAuthState = { loggedIn: false };

  if (refreshToken) {
    try {
      const res = await fetch('https://your-api.com/validate-refresh-token', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ refreshToken })
      });
      const data = await res.json();
      if (data.valid) {
        initialAuthState = { loggedIn: true, user: data.user };
      }
    } catch (err) {
      // 验证失败，保持未登录状态
    }
  }

  return { props: { initialAuthState } };
}

export default MyApp;

这样客户端首次渲染时，AuthContext的初始状态就是服务端验证后的结果，不会出现未登录状态的闪烁，同时SEO也不受影响——搜索引擎抓取的是服务端渲染的最终页面内容。

方法2：用React Suspense实现异步Context初始化 #

如果是纯客户端应用，可以把token验证逻辑封装成异步函数，结合React Suspense让组件等待验证完成后再渲染，避免先显示未登录状态。

步骤：

1. 创建一个异步函数来验证refreshToken。
2. 在AuthContext Provider中，使用useState和useEffect处理异步验证，同时利用Suspense的机制让子组件等待。

示例代码：

// contexts/AuthContext.js
import { createContext, useState, useEffect, useContext } from 'react';

const AuthContext = createContext();

// 异步验证token的函数
async function validateRefreshToken() {
  const refreshToken = localStorage.getItem('refreshToken');
  if (!refreshToken) return { loggedIn: false };
  
  try {
    const res = await fetch('https://your-api.com/validate-refresh-token', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ refreshToken })
    });
    const data = await res.json();
    return { loggedIn: data.valid, user: data.user || null };
  } catch (err) {
    return { loggedIn: false };
  }
}

export function AuthProvider({ children }) {
  const [authState, setAuthState] = useState(null); // 初始为null，表示正在验证

  useEffect(() => {
    async function initAuth() {
      const state = await validateRefreshToken();
      setAuthState(state);
    }
    initAuth();
  }, []);

  // 当authState为null时，抛出Promise让Suspense捕获
  if (authState === null) {
    throw new Promise(resolve => setTimeout(resolve, 0));
  }

  return (
    <AuthContext.Provider value={{ ...authState }}>
      {children}
    </AuthContext.Provider>
  );
}

export function useAuth() {
  return useContext(AuthContext);
}

然后在根组件中用Suspense包裹：

// index.js
import { Suspense } from 'react';
import { AuthProvider } from './contexts/AuthContext';
import App from './App';

ReactDOM.render(
  <Suspense fallback={<div>加载中...</div>}> {/* 这里的加载内容要简洁，不影响SEO */}
    <AuthProvider>
      <App />
    </AuthProvider>
  </Suspense>,
  document.getElementById('root')
);

这种方式下，页面会先显示加载状态，直到验证完成后才渲染正确的菜单和导航栏，避免状态切换的闪烁。注意fallback的内容要尽量简单，比如只显示一个加载图标或文字，不会被搜索引擎误判为正式内容。

方法3：提前发起验证请求（纯客户端优化） #

在React应用渲染前，先发起token验证请求，等请求完成后再初始化App和AuthContext。

示例代码：

// index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import { AuthProvider } from './contexts/AuthContext';
import App from './App';

// 提前验证token
async function initApp() {
  const refreshToken = localStorage.getItem('refreshToken');
  let initialAuthState = { loggedIn: false };

  if (refreshToken) {
    try {
      const res = await fetch('https://your-api.com/validate-refresh-token', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ refreshToken })
      });
      const data = await res.json();
      if (data.valid) {
        initialAuthState = { loggedIn: true, user: data.user };
      }
    } catch (err) {
      // 验证失败，保持未登录状态
    }
  }

  // 验证完成后渲染App
  const root = ReactDOM.createRoot(document.getElementById('root'));
  root.render(
    <AuthProvider initialState={initialAuthState}>
      <App />
    </AuthProvider>
  );
}

// 执行初始化
initApp();

同时修改AuthProvider，支持接收initialState：

// contexts/AuthContext.js
export function AuthProvider({ children, initialState }) {
  const [authState, setAuthState] = useState(initialState);

  // 后续的状态更新逻辑（比如登录/登出）
  // ...

  return (
    <AuthContext.Provider value={{ ...authState, setAuthState }}>
      {children}
    </AuthContext.Provider>
  );
}

这种方法会让应用在验证完成后才开始渲染，完全避免了初始未登录状态的显示，适合对视觉体验要求高的纯客户端应用。不过要注意，验证请求的耗时会增加页面的首屏加载时间，所以要确保后端验证接口的响应速度足够快。

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