Серверная гидратация на стороне сервера с Vue.js и SSR

Question

У меня есть приложение Vue.js, работающее со сбоем на стороне сервера (SSR), а затем гидратация на стороне клиента, и он отлично работает. Мне нравится строить изоморфный javascript и думать, что это путь будущего.

Но есть еще одна проблема, которую я бы хотел решить. Вот простая схема:

Сначала мы проверим если мы имеем сохраненную в кэше HTML ответ

Если у нас нет кэша, то мы:

1. сделать на стороне сервера Render (SSR) для отображения HTML из приложения vue.js
2. Затем мы сохраняем в кэше
3. и отправим ответ клиенту
4. Где на данный момент мы монтируем приложение vue.js и делаем гидратацию на стороне клиента.

Этот поток у меня есть и отлично работает. Я хотел бы выяснить, как сделать шаг в синем.

Если у нас есть кэш, я хотел бы: тогда

1. Загрузи HTML и так же, как на стороне клиента гидратация смонтировать vue.js приложения и обновлять части кэшированного HTML является уникальным только для текущего пользователя (т.е. информация об учетной записи, нравится, следует и т. д.)
2. отправить ответ клиенту
3. тогда, как и раньше, увлажнение стороны клиента, чтобы сделать страницу интерактивной.

Я провел некоторое исследование и не нашел никакой информации о гидратации на стороне сервера. Я даже заглянул в другие изоморфные фреймы, такие как реакция и угловой 2, чтобы увидеть, есть ли у них решение и не может найти его.

Я не возражаю против создания чего-то подобного, но мне нужен толчок в правильном направлении, поэтому, если есть кто-то там, который работает над такого рода вещами или имеет какие-либо предложения, очень ценится.

Answer 1

Как document словам, на стороне клиента Гидратация:

В серверном рендеренной выходе, корневой элемент будет иметь сервера рендеренной = «истинный» атрибут . На клиенте, когда вы монтируете экземпляр Vue на элемент с этим атрибутом, он попытается выполнить «гидратировать» существующую DOM вместо создания новых узлов DOM.

Например, сервер визуализации результат:

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

и код клиента:

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

Таким образом, клиент найдет сгенерированный виртуальное дерево DOM, совпадает с DOM структура с сервера.После «гидратации» итоговый результат визуализации будет:

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

Как вы видите, это то, что вы хотите.