仅限服务器端渲染的`<server-only>`标签

Question

我有一些代码只需要在客户端渲染，因此我将它包裹在标签中。

然而，为了防止内容跳动，我尝试只在服务器端渲染元素，使用了以下代码：

<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
},

尝试搜索文档，但没有找到标签 :(

Answer 1

没关系，使用v-show代替v-if修复了它：

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

希望这将再次帮助我解决问题...