仅在服务器端渲染，即。 e. `<server-only>` 标签答案

【问题标题】：Render only on server-side, i. e. `<server-only>` tag仅在服务器端渲染，即。 e. `<server-only>` 标签
【发布时间】：2021-10-29 18:26:53
【问题描述】：

我的一些代码只需要在客户端呈现，因此我将其包装在<client-only> 标签中。

但是，为了防止内容跳转，我尝试使用以下方法仅在服务器端呈现元素：

<div v-if="$isServer" class="h-nonav bg-gray-500" />

这确实有效，但 Vue 抱怨服务器端 HTML 与客户端不匹配。

这行得通，但听起来太 hackish 并导致页面呈现两次：

<div v-if="ssr" class="h-nonav bg-gray-500" />
...
data() {
  return {
    ssr: true
  }
},
mounted() {
  this.ssr = false
},

尝试搜索文档但没有<server-only>标签:(

【问题讨论】：

【解决方案1】：

没关系，v-show 而不是 v-if 修复它：

<div v-show="$isServer" />

希望这将再次帮助我...

【讨论】：