Nuxt中SSG工作原理及相关运行机制问题咨询

1. 静态生成页面的实例与运行模式 #

• 是，SSG 模式下每个预渲染页面都会生成独立的 Vue app 实例。你从服务端请求到预渲染的 HTML 后，客户端会完成注水（hydrate）过程，激活后的页面完全以 SPA 形式运行，后续站内路由跳转不会再请求完整 HTML，仅加载对应页面的资源 chunk。

2. 多页面间的状态独立性 #

• 该结论需要分场景判断：如果是首次加载不同页面/手动刷新页面的场景，每个页面对应的 Vue app 实例完全独立，不存在默认的共享状态。但如果是 SPA 模式下通过 <nuxt-link> 做内部跳转，全程只会初始化一次 Vue 实例，此时状态全局共享，不会销毁重建。

3. SSG 模式下的 Vuex Store 逻辑 #

• 对，SSG 模式下每个页面预渲染时都会生成独立的 Vuex Store 实例，你在 asyncData/fetch 钩子中修改的 Store 状态会被序列化，注入到页面 HTML 的 window.__NUXT__ 变量中，客户端注水时会直接用这个初始状态初始化客户端 Store 实例，保证服务端和客户端渲染内容一致。

4. 页面跳转/刷新时的 Store 生命周期 #

• 该说法仅部分正确：
  • 手动刷新当前页面、或者从外部站点跳转到当前站点的任意页面时，整个 Vue 实例连带 Store 会被完全销毁，重新初始化新的实例和 Store，加载对应页面的初始状态
  • 通过 Nuxt 内置路由能力（<nuxt-link>、$router.push 等）做站内跳转时，Vue 实例和全局 Store 不会销毁，只会更新 Store 中对应页面模块的状态，不会替换整个 Store 实例

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