如何在Next.js的getInitialProps中使用Context API Consumer处理加载？

getInitialProps本质是绑定在页面组件上的静态方法，它的执行完全独立于React组件树的渲染流程，这也是没法直接在里面调用Context方法的根本原因：

• 首次访问/刷新页面时，它跑在服务端Node.js进程中，此时整个组件树还没完成挂载，根本不存在Provider注入的Context实例
• 客户端路由跳转时，它跑在浏览器端的全局路由处理逻辑中，调用位置同样不在组件树的渲染链条里，拿不到组件树里的Context引用

方案1：通过自定义App（_app.js）做逻辑中转 #

这是Next.js官方推荐的跨页面全局逻辑处理方式，核心思路是把spinner的控制逻辑从页面组件的渲染链路里抽离，适配静态方法的执行时机：

• 先在_app.js中初始化全局Context，把spinner的展示/隐藏方法挂载到Provider的value上，同时让这些方法基于模块级单例状态或全局事件总线实现，不依赖组件内部的React state作为唯一数据源，保证不管从哪个位置调用，操作的都是同一份全局状态
• 把原本写在页面getInitialProps里的加载逻辑，挪到App的getInitialProps中统一处理：在调用页面自身的getInitialProps之前触发spinner展示，等页面的异步数据请求全部完成后，再触发spinner隐藏

参考代码结构：

// 模块级全局事件总线单例
const globalEventBus = {
  listeners: {},
  on(event, cb) {
    this.listeners[event] = this.listeners[event] || [];
    this.listeners[event].push(cb);
  },
  emit(event) {
    this.listeners[event]?.forEach(cb => cb());
  }
}

// 全局Context定义
const GlobalContext = createContext(null);

export default function MyApp({ Component, pageProps }) {
  const [spinnerVisible, setSpinnerVisible] = useState(false);

  // Context暴露的spinner控制方法，和静态方法的触发逻辑保持一致
  const contextValue = {
    showSpinner: () => setSpinnerVisible(true),
    hideSpinner: () => setSpinnerVisible(false)
  }

  // 绑定事件监听，让getInitialProps的触发能同步到组件状态
  useEffect(() => {
    globalEventBus.on('spinner:show', () => setSpinnerVisible(true));
    globalEventBus.on('spinner:hide', () => setSpinnerVisible(false));
  }, []);

  return (
    <GlobalContext.Provider value={contextValue}>
      <GlobalSpinner visible={spinnerVisible} />
      <Component {...pageProps} />
    </GlobalContext.Provider>
  )
}

// App层的getInitialProps，统一处理所有页面的加载逻辑
MyApp.getInitialProps = async ({ Component, ctx }) => {
  let pageProps = {};
  if (Component.getInitialProps) {
    // 直接触发模块级事件，不需要依赖组件树的Context实例
    globalEventBus.emit('spinner:show');
    try {
      pageProps = await Component.getInitialProps(ctx);
    } finally {
      // 不管请求成功或失败，都关闭spinner
      globalEventBus.emit('spinner:hide');
    }
  }
  return { pageProps };
}

方案2：纯客户端场景绕开getInitialProps #

如果你的页面不需要服务端渲染能力，完全可以放弃在getInitialProps里写数据请求逻辑，直接在组件渲染周期内通过useContext消费Context方法控制spinner：

import { useContext, useEffect } from 'react';
import { GlobalContext } from '../contexts/global-context';

export default function ClientPage() {
  const { showSpinner, hideSpinner, loadPageData } = useContext(GlobalContext);

  useEffect(() => {
    const initPage = async () => {
      showSpinner();
      try {
        await loadPageData();
      } finally {
        hideSpinner();
      }
    }
    initPage();
  }, [showSpinner, hideSpinner, loadPageData]);

  return <div>页面主体内容</div>
}

• 不要尝试在getInitialProps里直接渲染Context.Consumer组件：getInitialProps不是React组件，也没有组件树上下文引用，这种写法只会拿到Context定义时的默认值，根本拿不到Provider注入的真实值
• 注意服务端环境的边界：服务端渲染阶段没有用户可见的浏览器界面，在服务端执行的getInitialProps里触发spinner逻辑是没有实际意义的，spinner的展示逻辑只需要适配客户端路由跳转的场景即可
• 如果你的Context方法依赖浏览器专属API（比如window、document），要做好运行环境判断，避免在服务端执行时抛出引用错误

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