[Vuejs]-Vue.js and svg modules and mismatched nodes

by

0👍

✅

In your example the problem is due to the usage of Math.random() in pages/index.vue (and has nothing to do with SVG). As a result the server-side rendered page doesn’t match the virtual DOM produced on the client-side, leading to the observed warning during hydration.

From the Vue SSR documentation:

Hydration refers to the client-side process during which Vue takes over the static HTML sent by the server and turns it into dynamic DOM that can react to client-side data changes.

…

In development mode, Vue will assert the client-side generated virtual DOM tree matches the DOM structure rendered from the server. If there is a mismatch, it will bail hydration, discard existing DOM and render from scratch.

Leave a comment