Server Side Hydration with Vue.js and SSR

A viable solution is to figure out which components in your app you can cache, and then employ something like Component-level caching ( https://ssr.vuejs.org/guide/caching.html#component-level-caching ) to cache the non-user-specific components, while rendering the user-specific components on each run.

As the document said, the Client Side Hydration is:

In server-rendered output, the root element will have theserver-rendered="true" attribute. On the client, when you mount a Vueinstance to an element with this attribute, it will attempt to"hydrate" the existing DOM instead of creating new DOM nodes.

For example, the server rendered result is:

<div class="app" id="app" server-rendered="true">    <div class="labrador">Hello Labrador</labrador>    <div class="husky"></div></div>

and the client code is:

Vue.component('husky', {    template: '<div class="husky">Hello husky</div>'})var rootComp = {    template: '' +        '<div class="app" id="app">' +        '    <div class="labrador"></div>' +        '    <husky></husky>' +        '</div>'}new Vue({    el: '#app',    render: h => h(rootComp)})

So the client will find the generated virtual DOM tree matches with the DOM structure from the server. After the "Hydration", the final render result will be:

<div class="app" id="app" server-rendered="true">    <div class="labrador">Hello Labrador</labrador>    <div class="husky">Hello husky</div></div>

As you see, this is what you want.