Next.js 13.1中router.push等待getServerSideProps完成再导航的疑问

数据老陈

2026-7-20

Next.js 13.1 Pages Router 导航行为与页面加载UI问题解答

1. 路由等待`getServerSideProps`完成后导航是否符合预期？

是的，这是Pages Router的默认预期行为。当通过router.push跳转至包含getServerSideProps的页面时，Next.js会将服务端数据获取作为页面渲染的前置步骤——因为getServerSideProps返回的数据是目标页面渲染的必要依赖，所以必须等待数据获取完成后，才会完成客户端导航并渲染页面内容。

官方文档虽未直接将router.push标注为“阻塞操作”，但这是服务端数据获取逻辑的固有设计，确保用户看到的是完整的、有数据的页面，而非空页面或错误状态。

2. 是否只能全局处理页面过渡？如何实现页面专属加载UI？

并非只能全局处理，你可以通过以下方案实现页面专属的加载UI（如自定义骨架屏）：

拆分导航与数据加载逻辑：不直接依赖getServerSideProps，而是先通过router.push立即完成客户端导航，进入目标页面后，在组件内部手动发起数据请求（比如用fetch或Axios），请求期间渲染专属骨架屏，数据返回后再替换为正式内容。这种方式需要将原getServerSideProps中的逻辑迁移到客户端组件内。
利用状态管理标记加载状态：在触发跳转前，通过全局状态（如React Context、状态管理库）记录目标页面的加载状态，执行router.push后，目标页面先根据该状态渲染专属骨架屏，直到getServerSideProps传递的数据到位后，再切换为正式页面内容。
自定义跳转封装函数：封装一个跳转工具函数，在调用router.push前，先在当前页面或全局容器中渲染目标页面的专属加载组件，等导航完成（可通过router.isReady或路由事件监听）后再移除加载组件。