<p>I have some code that only needs to be rendered on the client side, so I wrap it in a <code><client-only></code> tag. </p> <p>However, to prevent the content from bouncing, I tried rendering the element only on the server side, using the following code: </p> <pre class="brush:php;toolbar:false;"><div v-if="$isServer" class="h-nonav bg-gray-500" /></pre> <p>This does work, but Vue will complain that the server-side HTML is inconsistent with the client-side. </p> <p>While this works, it sounds a bit hackish and will cause the page to be rendered twice: </p> <pre class="brush:php;toolbar:false;"><div v-if="ssr" class="h-nonav bg-gray-500" /> ... data() { return { ssr: true } }, mounted() { this.ssr = false },</pre> <p>Trying to search the documentation, but the <code><server-only></code> tag was not found :(</p>

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