Vue SSR with v-if. How to correctly perform hydration?

Question

I have a problem with Vue SSR. In my project I have a page called slug, where depending on the data received in asyncData, the appropriate component is mounted. It looks more or less like this:

<div>
  <component-a v-if='type === a' />
  <component-b v-else-if='type === b' />
  <component-c v-else-if='type === c' />
</div>

<script>
export default {
  asyncData({ store }) {
    store.dispatch('product/fetchAsync') 
  },
  computed () {
   type () {
     return this.$store.state.type
    }
  }
}
</script>

However, Vue is not able to perform SSR hydration. Is there a possibility that this is due to v-if statement? How to solve this correctly? The only thing I can think of is prefixes and making each component a separate page, without v-if. But the client would like to avoid this.

Answer 1

As some comments say, your html structure at server side (where ssr is happening) don't know if the conditions for rendering an item or other are true.

You can use v-show instead of v-if. The difference is that v-show will render that element but with no data. This way your html won't change and hydration is successful