在 Next/React 完成加载之前显示带有百分比的加载横幅

Display a loading banner with percentage before Next/React has finished loading

我的下一个 SPA 正在从 API 获取 3D 地图和数据。有没有办法添加一个加载横幅,显示在应用程序完全加载之前 files/components/data 当前加载的百分比?

我正在寻找与此类似的内容:

我正在考虑 2 种方法来执行此操作,具体取决于数据是在您的应用程序运行时获取的,还是您的应用程序依赖于根目录:

  1. 通过使用挂钩的服务器端提取器(参见 load splash screen before nextjs
  2. 通过手动获取数据(例如,字面意思是使用 fetch),在您的应用加载后并在使用 fetch 时使用 response.body 跟踪进度(参见 https://javascript.info/fetch-progress 以供参考)