Server Side Hydration with Vue.js and SSR

Question

I have a Vue.js App working with Server Side Rendering (SSR) and then client side hydration and it works great. I love building isomorphic javascript and think it is the way of the future.

But there is still one issue i would like to solve. Here is a simple diagram:

First we check if we have the cached HTML response

If we do not have cache then we:

1. Do a Server Side Render (SSR) to render the HTML from a vue.js app
2. Then we save to cache
3. and send response to client
4. Where at this point we mount the vue.js app and do client side hydration.

This flow i have down and works great. I would like to figure out is how to do the step in blue.

If we have cache I would like to:

1. Load the html and just like client side hydration mount the vue.js app and update the pieces of cached html then is unique to the current user only (i.e. account info, likes, follows, etc.)
2. send response to client
3. then just like before do client side hydration to make page interactive.

I have done some research and I could not find any information about Server Side Hydration. I even looked into other isopmorphic framworks like react and angular 2 to see if they had a solution and could not find one.

I don't mind building something like this but i need a push in the right direction, so if there is someone out there that is working on this kind of thing or has any suggestions, much appreciated.

Answer 1

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.

Answer 2

As the document said, the Client Side Hydration is:

In server-rendered output, the root element will have the server-rendered="true" attribute. On the client, when you mount a Vue instance 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.