tutorial - Server Side Hydration con Vue.js y SSR

vue y nuxt

Question

Tengo una aplicación Vue.js que funciona con Server Side Rendering (SSR) y luego la hidratación del lado del cliente y funciona muy bien. Me encanta construir javascript isomorfo y creo que es el camino del futuro.

Pero todavía hay un problema que me gustaría resolver. Aquí hay un diagrama simple:

Primero verificamos si tenemos la respuesta en caché HTML

Si no tenemos caché, entonces nosotros:

1. Realice un procesamiento de servidor (SSR) para renderizar el HTML desde la aplicación vue.js
2. Luego guardamos en caché
3. y enviar respuesta al cliente
4. Donde en este punto montamos la aplicación vue.js y hacemos la hidratación del lado del cliente.

Este flujo lo tengo abajo y funciona muy bien. Me gustaría descubrir cómo hacer el paso en azul.

Si tenemos caché, me gustaría:

1. Cargue el html y, al igual que la hidratación del lado del cliente, monte la aplicación vue.js y actualice los trozos de html almacenados en caché; entonces es exclusivo para el usuario actual (es decir, información de la cuenta, me gusta, sigue, etc.)
2. enviar respuesta al cliente
3. entonces al igual que antes, haga la hidratación del lado del cliente para hacer que la página sea interactiva.

Investigué un poco y no pude encontrar ninguna información sobre Server Side Hydration. Incluso busqué en otras estructuras isómpicas como reaccionar y angular 2 para ver si tenían una solución y no podían encontrar una.

No me importa construir algo como esto, pero necesito un empujón en la dirección correcta, por lo que si hay alguien por ahí que está trabajando en este tipo de cosas o tiene alguna sugerencia, muy apreciada.

Answer 1

Como decía el documento , la hidratación del lado del cliente es:

En la salida procesada por el servidor, el elemento raíz tendrá el atributo server-rendered = "true". En el cliente, cuando monta una instancia de Vue en un elemento con este atributo, intentará "hidratar" el DOM existente en lugar de crear nuevos nodos DOM.

Por ejemplo, el resultado representado por el servidor es:

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

y el código del cliente es:

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

Entonces, el cliente encontrará el árbol DOM virtual generado que coincide con la estructura DOM del servidor . Después de la "Hidración", el resultado final será:

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

Como ve, esto es lo que quiere.