`<server-only>` tag for server-side rendering only

Question

I have some code that only needs to be rendered on the client side, so I wrap it in a tag.

However, to prevent the content from bouncing, I tried rendering the element only on the server side, using the following code:

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

This does work, but Vue will complain that the server-side HTML is inconsistent with the client-side.

While this works, it sounds a bit hackish and will cause the page to be rendered twice:

<div v-if="ssr" class="h-nonav bg-gray-500" />
...
data() {
  return {
    ssr: true
  }
},
mounted() {
  this.ssr = false
},

Trying to search the documentation, but the tag was not found :(

Answer 1

Never mind, using v-show instead of v-if fixed it:

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

Hope this will help me out again...