僅限伺服器端渲染的`<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" />

希望這能再次幫助我解決問題...