サーバー側レンダリングのみの `<server-only>` タグ

Question

クライアント側でのみレンダリングする必要があるコードがいくつかあるので、それを タグで囲みます。

ただし、コンテンツのバウンスを防ぐために、次のコードを使用して、サーバー側でのみ要素をレンダリングしてみました。

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

これは機能しますが、Vue はサーバー側の HTML がクライアント側の HTML と矛盾していると警告します。

これは機能しますが、少しハックっぽく聞こえるため、ページが 2 回レンダリングされます:

<div v-if="ssr" class="h-nonav bg-gray-500" />
...
データ（） {
  戻る {
    SSR：真
  }
}、
マウントされた() {
  this.ssr = false
},

ドキュメントを検索しようとしましたが、 タグが見つかりませんでした:(

Answer 1

気にしないでください。v-if の代わりに v-show を使用すると問題が解決しました:

リーリー

これがまた役立つことを願っています...