hydration.md

Client Side Hydration

In entry-client.js, we are simply mounting the app with this line:

// this assumes App.vue template root element has `id="app"`
app.$mount('#app')

Since the server has already rendered the markup, we obviously do not want to throw that away and re-create all the DOM elements. Instead, we want to "hydrate" the static markup and make it interactive.

If you inspect the server-rendered output, you will notice that the app's root element has a special attribute:

<div id="app" data-server-rendered="true">

The data-server-rendered special attribute lets the client-side Vue know that the markup is rendered by the server and it should mount in hydration mode.

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. In production mode, this assertion is disabled for maximum performance.

Hydration Caveats

One thing to be aware of when using SSR + client hydration is some special HTML structures that may be altered by the browser. For example, when you write this in a Vue template:

<table>
  <tr><td>hi</td></tr>
</table>

The browser will automatically inject <tbody> inside <table>, however, the virtual DOM generated by Vue does not contain <tbody>, so it will cause a mismatch. To ensure correct matching, make sure to write valid HTML in your templates.