8

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:

Server Side Hydration 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.

smitt04
  • 3,018
  • 2
  • 28
  • 30
  • Hi. Can I ask you about server performance? How many requests per seconds can you reach without caching? – Mattia Jan 24 '17 at 22:07
  • 1
    Unfortunately i haven't had time to do benchmarking yet, we will be going live soon, and when i get some numbers i can report. – smitt04 Feb 04 '17 at 18:07

2 Answers2

1

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.

Alexis Tyler
  • 1,394
  • 6
  • 30
  • 48
Albert Zhang
  • 757
  • 1
  • 8
  • 19
  • Yea I have the normal SSR with client side hydration working. But it would be cool to say, fetch html from cache, and hydrate with user information then serve to the client. That way we don't see flashing, as majority of the page is the same between all users, it would be nice to cache it, then just update the parts that are different on server before it reaches client. – smitt04 Mar 10 '17 at 15:34
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.

Visualize
  • 590
  • 5
  • 12