Next.js 怎样获取当前页面的加载进度？

[dream4ever]

现在有一个需求，就是在页面之间跳转时，需要显示一个进度条告知用户页面加载进度。

问了 DeepSeek ，Google 也查了查，都没找到能获取实际加载进度的解决方案。

[dudubaba]

window.onload 一般精准的算不出来，就是模拟，比如 1s 内算加载 70%，3S 内加载完就是 100%，加载不完进度条在 90%，等 onload 时间执行完成后就 100%；

[shakaraka]

都是用假的。参考 youtube

[Iamadog]

你直接监听计算路由地址切换的时间试试

[Iamadog]

如果只是加一个进度条的话可是试试 nextjs-toploader

[dream4ever]

@Iamadog 如果只是这个需求很简单，问 AI 都能给我搞定，哈哈。

[rocmax]

做个假的，延时 1 秒播个动画再触发路由跳转。或者 suspense 的 fallback 里播个到 99%的动画。

更有意义的可能是在播动画时把 data prefetch 做了，这个进度可以监视，然后直接跳转就好了。

要显示当前页面载入进度也得等页面下载完先渲染出进度条组件，这个时候如果不是需要请求大量数据的话跟直接显示页面内容没太大差别。

[zzzyyysss]

这就是无解的需求吧，首先如何确定这个页面到底需要加载多大的资源，页面里的多媒体文件算不算？通过 css 引入的图片 字体 其它 css 这些算不算？还有更多动态引入的资源。
youtube 那个就是最优的解。让用户感知页面正在加载，如果一个页面超过 3 秒加载不出来，那用户已经没有兴趣打开了。如果 3 秒内能打开，那加载进度是不是不是很重要。
这不是下载一个大文件，我需要知道下载了多少，还剩多少。

[yimity]

```
const [isPending, startTransition] = useTransition();
startTransition(() => {
push(`${pathname}`);
});
```