Server side hydration with Vue.js and SSR

I have a Vue.js application working with Server Side Rendering (SSR) and then client side hydration and it works fine. I like to build isomorphic javascript and think that this is the way to the future.

But there is one more problem that I would like to solve. Here is a simple diagram:

Server Side Hydration Diagram

First we check if we have a cached HTML response

If we don’t have a cache, we:

  • Make server side render (SSR) for rendering HTML from vue.js application
  • Then we save the cache
  • and send a response to the client
  • Where at this moment we mount the vue.js application and do hydration on the client side.

This thread works for me and works great. I would like to figure out how to take a step in blue.

If we have a cache, I would like to:

  • Download html and just like hydration on the client side, mount the vue.js application and update the pieces of cached html, then it is unique only to the current user (i.e. account information, like, follow, etc.).
  • send response to client
  • then, as before, you need to moisten the client side to make the page interactive.

I did some research, and I did not find any server-side hydration information. I even looked into other isomorphic frameworks like reaction and angular 2 to see if they have a solution and cannot find it.

I am not against creating something like this, but I need a push in the right direction, therefore, if there is someone who is working on this species or has any suggestions, it is very appreciated.

+6
source share
1 answer

According to client-side hydration:

In the server-processed output, the root element will have server-rendered = "true". On the client, when you install a Vue instance to an element with this attribute, it will try to β€œhydrate” the existing DOM instead of creating new DOM nodes.

For example, the result of a server rendering:

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

and client code:

 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) }) 

Thus, the client will find the generated virtual DOM tree with the DOM structure from the server . After hydration, the final rendering 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 can see, this is what you want.

+2
source

Source: https://habr.com/ru/post/1012912/


All Articles