我们正在使用这种方法来呈现内容:
<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？
最佳答案
这就是您要查找的内容:https://github.com/maoberlehner/vue-lazy-hydration
创建者 Markus Oberlehner谁在寻求避免将大量 JS 运送到前端，尤其是在不需要时。
您确实有多种选择，但这就是它的使用方式
<lazy-hydrate never>
<article-content :content="article.content"/>
</lazy-hydrate>
在这种情况下，水合作用(将 JS 注入(inject)静态内容)永远不会发生。还有其他有趣的选项也可以使用!
请记住，这更像是一个概念验证，因此 Markus 仍将其视为 beta-ish 的原因。这个项目可能会在某个时候死掉，因为 Vue3/Nuxt3 将能够以官方方式做到这一点。
尽管如此，即使我还没有尝试过，您现在就可以完全使用它并享受 JS-light 体验，它应该可以工作!
关于vue.js - 使用SSR时如何防止Nuxt水化？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/67733275/