使用 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 content 变量。它仍然包含在最终的 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 注入静态内容）永远不会发生。还有其他有趣的选项也可以使用！

请记住，这更像是一个概念证明，因此 Markus 仍然认为它是 beta-ish。这个项目可能会在某个时候死掉，因为 Vue3/Nuxt3 将能够以官方方式做到这一点。

尽管如此，即使我还没有尝试过，您现在完全可以使用它并享受 JS-light 体验，它应该可以工作！