NextJS结合SSG与客户端导航的工作机制咨询

核心答案 #

用<Link>组件做客户端导航时，初始请求后跳转到其他SSG页面，不会请求预渲染的HTML文件，但会按需加载对应页面的JS代码块（预获取的情况除外）。

逐个问题拆解 #

1. 首次访问的资源情况 #

用户第一次打开你的SSG应用时，服务器返回当前页面的预渲染HTML、全局Next.js运行时JS，以及当前页面的组件JS代码块。其他页面的HTML和JS不会在这一步全部打包发给客户端——Next.js默认做了代码分割，目的就是让首屏加载更快。

2. 客户端跳转时的资源请求 #

当用户点击<Link>跳转其他页面：

• 不会向服务器请求目标页面的完整HTML，Next.js会在客户端用React直接渲染页面内容。
• 会请求目标页面对应的独立JS代码块（如果这个代码块没被预获取或加载过的话）。
• 默认情况下，进入视口的<Link>会自动预获取目标页面的JS代码块，用户点击时就不会有等待网络请求的延迟。

3. 怎么实现“纯SPA”效果 #

如果想让所有页面的JS在初始请求时就全部加载（像传统SPA那样），可以这么做，但不推荐生产环境使用：

• 禁用Next.js的代码分割：在next.config.js里配置optimization.splitChunks: false，但这会让初始包体积暴增，拖慢首屏加载速度。
• 手动预加载所有页面组件：用动态导入配合ssr: false，并在应用初始化时加载所有页面的JS，但同样会导致首屏变慢。

其实Next.js的客户端导航已经有SPA的流畅体验了，它的按需加载是优化性能的设计，没必要强行改成“纯SPA”——除非你的应用页面极少，且对跳转速度有极致要求。

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