使用SSR时如何防止Nuxt水合？

Question

我们正在使用这种方法来呈现内容：

<div id="full-article" v-html="content"></div>
this.content = api.response.data

在这种方法中，“内容”是从 API 检索的，但因为我们还使用服务器端渲染 (SSR)，所以最终的 HTML 变成了这样：

<div id="full-article">$real_html_content</div>
this.content = $real_html_content

这种方法意味着内容会被重复，一次作为呈现的 HTML，一次作为 JavaScript 变量。但在这种情况下，我们没有使用 javascript 内容变量。事实上，它仍然包含在最终的 HTML 页面中，这意味着页面大小是所需大小的两倍。我们怎样才能防止这种情况发生呢？是否有某种方法可以隐藏/删除已由 SSR 呈现的 JavaScript 内容？

或者，也许以不同的方式处理这些内容会更好，也许在稍后阶段插入它而不涉及 Nuxt 或 SSR？

Answer 1

这就是您要寻找的内容： https: //github.com/maoberlehner/vue-lazy-Hydration
由Markus Oberlehner创建，他试图避免将大量 JS 传送到前端，尤其是在不需要时。

您确实有多种选择，但这就是它的使用方式

<lazy-hydrate never>
  <article-content :content="article.content"/>
</lazy-hydrate>

在这种情况下，水合（将 JS 注入静态内容）永远不会发生。还有其他有趣的选项可以使用！

请记住，这更多的是概念证明，因此马库斯仍然认为它是测试版。这个项目可能会在某个时候消亡，因为 Vue3/Nuxt3 将能够以官方方式做到这一点。

不过，即使我还没有尝试过，你现在就可以完全使用它并享受 JS-light 体验，它应该可以工作！