Next.js中如何等待React Context Provider耗时构建值并展示加载态

你初步考虑在Provider内添加isLoading状态的方案完全正确，是当前场景下的最优解，React.lazy、Suspense并不适配这个需求。

方案适配性说明 #

为什么不使用React.lazy和Suspense #

• React.lazy的核心作用是动态导入组件、实现代码分割，解决的是组件JS代码未下载完成的场景，而你的需求是组件已经加载完毕，仅全局Context的业务数据未就绪，二者场景完全不匹配。
• 原生Suspense用于数据获取时，需要配合符合Suspense规范的数据源（如Relay、React Query的Suspense模式），且在Pages Router的全局Provider场景下，直接用Suspense包裹子组件会导致全应用统一显示加载态，灵活度远低于自定义状态方案。

具体实现步骤 #

1. 修改GlobalContextProvider，在初始状态中内置isLoading标识，同时解决原代码中context初始值为undefined、消费组件直接访问context.foo会报错的问题
   修改后的Provider代码：

import React, { useContext, useEffect, useState } from 'react';

const GlobalContext = React.createContext();

export const GlobalContextProvider = ({ children }) => {
  // 初始状态直接包含isLoading，避免context为undefined
  const [state, setState] = useState({
    isLoading: true,
  });

  useEffect(() => {
    const timer = setTimeout(() => {
      // 数据就绪后更新状态，关闭加载标识
      setState(prevState => ({
        ...prevState,
        isLoading: false,
        foo: 'bar'
      }));
    }, 5000);

    // 组件卸载时清除定时器，避免内存泄漏与状态更新警告
    return () => clearTimeout(timer);
  }, []);

  return (
    <GlobalContext.Provider value={state}>
      {children}
    </GlobalContext.Provider>
  );
};

export const useGlobalContext = () => useContext(GlobalContext);

2. 修改首页消费逻辑，根据isLoading状态渲染加载指示器或业务内容
   修改后的首页代码：

import { useGlobalContext } from '../context/global';

export default function Home() {
  const context = useGlobalContext();

  // 加载中显示占位内容，可替换为自定义加载组件
  if (context.isLoading) {
    return <div>正在加载...</div>;
  }

  return (
    <div>
      {context.foo}
    </div>
  );
}

扩展优化 #

• 可根据需求扩展state的结构，新增isError、error等字段，统一处理异步数据加载失败的场景。
• 如果5秒的计算逻辑不依赖浏览器API，可直接在Next.js Pages Router的getServerSideProps或getStaticProps中预先完成计算，将初始数据通过_app.js的pageProps传入Provider，彻底消除客户端加载等待时间。

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