„<server-only>'-Tag nur für serverseitiges Rendering

Question

Ich habe Code, der nur auf der Clientseite gerendert werden muss, also verbinde ich ihn mit einem -Tag.

Um jedoch zu verhindern, dass der Inhalt zurückspringt, habe ich versucht, das Element nur auf der Serverseite zu rendern, indem ich den folgenden Code verwendet habe:

<div v-if="$isServer" class="h-nonav bg-gray-500"
<p>Das funktioniert zwar, aber Vue wird sich darüber beschweren, dass der serverseitige HTML-Code nicht mit dem clientseitigen HTML-Code übereinstimmt. </p>
<p>Das funktioniert zwar, klingt aber etwas hackig und führt dazu, dass die Seite zweimal gerendert wird: </p>
<pre class="brush:php;toolbar:false;"><div v-if="ssr"
...
Daten() {
  zurückkehren {
    ssr: stimmt
  }
},
mount() {
  this.ssr = false
},

Beim Versuch, die Dokumentation zu durchsuchen, wurde das Tag nicht gefunden :(

Answer 1

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

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

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