Next.js跳转首页如何避免重渲染？能否用单文件处理所有路由请求

问题1 跳转首页避免重渲染的解决方案 #

你当前跳转首页触发重渲染的核心原因是：/ 对应 index.js、/foo 等路径对应 [page].js，在Next.js路由系统中这是两个完全独立的页面组件，就算内容完全一致，跨不同页面组件的跳转哪怕开启shallow=true也会触发组件的卸载与重挂载，必然触发重渲染。
有两种解决方案：

• 抽离公共逻辑到单独组件：把两个页面完全一致的代码封装为同一个公共组件，用React.memo包裹该组件后，分别在index.js和[page].js中引入使用。只要公共组件的props没有变化，哪怕页面层级发生卸载重挂载，也不会触发不必要的组件重渲染。
• 合并页面文件：直接删除冗余的页面文件，用单个文件承接所有路由请求，从根源上消除跨页面组件跳转的问题，对应第二个问题的解决方案。

问题2 实现思路优化&单文件处理方案 #

你当前的实现存在冗余，完全可以用单个文件处理所有入站请求，不需要同时维护两份完全一致的页面文件。
你可以使用Next.js pages路由的可选捕获所有路由特性：

1. 删除现有的index.js
2. 将[page].js重命名为[[...page]].js

这个文件会自动匹配所有路径：包括根路径/、一级路径/foo、多级路径/foo/bar等。其中根路径下路由参数page为undefined，其他路径下page为路径段组成的数组，你可以根据原有逻辑做参数适配即可。
调整后所有路径都对应同一个页面组件，只要跳转时开启shallow=true，不管是在不同二级路径之间跳转，还是跳转到首页，都不会触发组件卸载重挂载，也就不会出现多余的重渲染。

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