Серверна гідратація з Vue.js і SSR - vue.js, isomorphic-javascript, серверів-рендеринга

У мене є додаток Vue.js, який працює з серверним рендерінгом (SSR), а потім гідратацією на стороні клієнта, і це чудово працює. Я люблю будувати ізоморфний javascript і думаю, що це шлях майбутнього.

Але все ж є одне питання, яке я хотів би вирішити. Ось проста схема:

Спочатку ми перевіряємо, чи є у нас кешована відповідь HTML

Якщо у нас немає кешу, ми:

1. Зробіть серверну візуалізацію (SSR), щоб видати HTML з програми vue.js
2. Тоді ми економимо для кешування
3. і надіслати відповідь клієнту
4. Де в цей момент ми монтуємо додаток vue.js і робимо гідратацію на стороні клієнта.

Цей потік у мене вниз і працює чудово. Мені хотілося б зрозуміти, як зробити крок синім кольором.

Якщо у нас є кеш, я хотів би:

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

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

Я не задумую будувати щось подібне, але мені потрібно підштовхнути в правильному напрямку, тому, якщо там є хтось, хто працює над подібними речами або має якісь пропозиції, дуже вдячний.

Відповіді:

2 для відповіді № 1

Як документ сказав, що гідратація на стороні клієнта:

У виведеному сервером висновку буде кореневий елементмати атрибут server-rended = "true". На клієнті, коли ви монтуєте 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>

Як бачите, саме цього ви хочете.

---