在 NuxtJS 中初始加载后，SSR 是如何工作的？

Question

在纯 VueJS 应用程序中，我们有一个 <div id="app"></div> 容器，VueJS 将所​​有需要渲染的东西放在其中。

因此，如果我们在浏览器中打开源代码，我们将看不到任何呈现的内容。

所以，如果我们使用 SSR 的 Nuxt 功能，在第一次初始加载时，所有组件都会在服务器上呈现，我们会看到一些 HTML 内容。

但是，当我们浏览网站时，当它在“spa 模式”（使用<nuxt-link>）下工作时会发生什么。当我点击一个链接时，该网站没有完全重新加载。我在 chrome 开发工具中看不到任何请求，非 XHR 非其他。即使我们从后端获得了完全渲染的内容，它也是通过 javascript 插入的，就像 <div id="app"></div>" 的情况一样，因为我们不会重新加载页面。

但我可以在源代码中看到一切都按照 SEO 的需要运行：导航到其他一些路线后，所有 html 都存在于源代码中。但是这是怎么发生的呢？

Answer 1

这个过程称为水合。

请注意，在 SPA 模式下，一切都会在客户端上呈现。使用 SSR 时，第一次渲染发生在服务器上，因此您可以在源代码中看到 HTML。

一旦在客户端，VueJS 将“水合”它的状态，这意味着它将应用程序的状态设置为来自服务器的状态。如果您随后使用<nuxt-link>，它将在 SPA 模式下导航。另一方面，使用普通的<a> 不会。

这非常适合所有用例，因为 Google 和其他搜索引擎没有启用 Javascript，它们只会对您的所有链接发出全新的请求，但您的用户会有 SPA 页面的感觉。