Vue Hydration Mismatch

up:: Vue Usually has two causes:

1. Invalid HTML
2. Different states in client/server

Invalid HTML

Vue returns the HTML in the virtual DOM as written. The browser is forgiving and ‘fills in the gaps’. Hence the two DOMs don’t match each other.

Different states in client/server

Using Universal Rendering, the code runs both on the server as well as the client. In this example, the Math.random function gets executed twice. Once on the server, once on the client. The outcome might not be the same. Hence there is a hydration error.

<!--  index.vue -->
 
<template>
   <SomeContent v-if="displayContent" />
</template>
 
<script>
export default {
   data() {
      return { 
         displayContent: Math.random() > 0.5
      }
   }
}
</script>

Common pitfalls

• Dates, Timestamps and RaRandomising
• Authentification (the server is not aware of localStorage)