Why is the server side rendered content replaced by vue

Question

I have a simple index.html file with the following mounting point for vue:

<div id="server-rendered-test" server-rendered="true">server</div>

As you can see I pretend that the server has rendered the template. In my main.js I have the following code to mount vue:

const serverRenderedTest = new Vue({
  el: '#server-rendered-test',
  data: {
    text: 'client'
  },
  template: '<div id="server-rendered-test">{{ text }}</div>'
});

I expected vue to "hydrate" the existing DOM, but it doesn't since the end result (after vue kicking in) is:

<div id="server-rendered-test">client</div>

What am i missing?

Answer 1

Hydration means that Vue will try to use existing server-rendered elements instead of creating new ones (see explanation here). So in your case, it will find the already rendered div#server-rendered-test and replace the text in it with fresh data.

You're not missing anything, this is expected behaviour.