Balise `<server-only>` pour le rendu côté serveur uniquement
P粉463811100
2023-08-29 20:30:07
<p>J'ai du code qui doit uniquement être rendu côté client, je l'enveloppe donc dans une balise <code><client-only></code> </p>
<p>Cependant, pour éviter que le contenu ne rebondisse, j'ai essayé de restituer l'élément uniquement côté serveur, en utilisant le code suivant : </p>
<pre class="brush:php;toolbar:false;"><div v-if="$isServer" class="h-nonav bg-gray-500" /></pre>
<p>Cela fonctionne, mais Vue se plaindra que le code HTML côté serveur est incohérent avec celui côté client. </p>
<p>Bien que cela fonctionne, cela semble un peu hackish et entraînera le rendu de la page deux fois : </p>
<pre class="brush:php;toolbar:false;"><div v-if="ssr" class="h-nonav bg-gray-500" />
...
données() {
retour {
ssr : vrai
}
},
monté() {
ceci.ssr = faux
},</pré>
<p>J'ai essayé de rechercher dans la documentation, mais la balise <code><server-only></code> n'a pas été trouvée :(</p>
Ce n'est pas grave, corrigez-le en utilisant
v-show
代替v-if
:J'espère que cela m'aidera encore...