SSG 在 Nuxt 中是如何工作的?

How SSG works in Nuxt?

我是 Nuxt 开发平台的新手,主要在 Vue(v2) 中工作。

在深入研究文档并在本地进行了一些试验后,我仍然需要弄清楚一些事情:

  1. 在静态生成模式下,每个页面是否都有自己的 Vue 应用程序实例?也就是说,从服务器请求的每个预呈现页面在客户端上都表现为 SPA。
  2. 如果 #1 为真,是否每个页面,实际上每个应用程序 运行 都与所有其他页面和应用程序隔离?没有共享状态?
  3. 在 SSG 模式下使用 Vuex 时,在服务器上呈现页面时,每个页面是否都有自己的 Vuex 存储,该存储被初始状态膨胀?而且,这个状态会传递给客户端吗?
  4. 这个商店在导航到另一个页面(或什至刷新当前页面)时被销毁,要被一个新的代替吗?
  1. 在 SSG 中,每个页面都会提前呈现,但最后会被水合,从而成为 SPA。 Nuxt 基本上是类固醇的 Vue,但它仍然是 Vue。
  2. 不确定你在这里所谓的隔离,你完全可以传递 props,使用 emit 等...同时是的,如果你有页面,它们不会同时加载,有代码拆分 + 惰性加载+预取。一些信息可以是 found here.
  3. 你可以 namespaced modules out of the box when using Vuex with Nuxt. You do have nuxtServerInit to pre-populate the store yes. You could give a read to the Nuxt lifecycle 顺便说一句。但是你没有开箱即用的 Vuex 模块,这个 IMO 没有实际用途。是的,您当然会在客户端上获得 Vuex 商店。
  4. 如果您使用 <a></a> 标签导航到不同的路径,您将破坏您的 SPA 是的。如果您使用 <nuxt-link></nuxt-link>,您将留在 SPA 中,因为 Vue 路由器将进行“导航”。但是,是的,如果您直接在 url 中键入路径并按 Enter 或使用 F5 刷新页面,您的整个 SPA 将被破坏并且 一切 将从头开始替换。

我已经 spoken at the latest Nuxt-nation,质量不是很好(对此感到抱歉),但您可能会从中得到一些有趣的东西。