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

Question

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

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

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

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

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

标签： javascriptnuxt.jsserver-side-rendering

Answer 1

该过程称为水合。

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

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

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