Hidratação Client-Side

Hidratação refere-se ao processo client-side durante o qual o Vue assume o HTML estático enviado pelo servidor e o transforma em DOM dinâmico que pode reagir às alterações de dados client-side.

Em entry-client.js, estamos simplesmente montando o aplicativo com esta linha:

app.mount('#app')

Como o servidor já renderizou a marcação, obviamente não queremos jogar isso fora e recriar todos os elementos DOM. Em vez disso, queremos "hidratar" a marcação estática e torná-la interativa.

O Vue fornece um método createSSRApp para uso no código client-side (neste caso, em nosso entry-client.js) para dizer ao Vue para hidratar o HTML estático existente em vez de recriar todos os elementos DOM.

Limitações da Hidratação

O Vue confirmará que a árvore DOM virtual gerada pelo cliente corresponde à estrutura DOM renderizada a partir do servidor. Se houver uma incompatibilidade, ele deixará a hidratação, descartará o DOM existente e renderizará do zero. Haverá um aviso no console do navegador, mas seu site ainda funcionará.

A primeira forma importante de garantir que o SSR esteja funcionando é garantir que o estado do aplicativo seja o mesmo no cliente e no servidor. Tome cuidado especial para não depender de APIs específicas do navegador (como largura da janela, capacidade do dispositivo ou localStorage) ou do servidor (como built-ins do Node), e tome cuidado onde o mesmo código dará resultados diferentes quando executado em locais diferentes (como ao usar fusos horários, timestamps, normalizar URLs ou gerar números aleatórios). Consulte Escrevendo Código Universal para mais detalhes.

Uma segunda coisa importante a ser observada ao usar o SSR + hidratação no cliente é que HTML inválido pode ser alterado pelo navegador. Por exemplo, quando você escreve isso em um template Vue:

<table>
  <tr>
    <td>oi</td>
  </tr>
</table>

O navegador automaticamente injetará <tbody> dentro de <table>, entretanto, o DOM virtual gerado pelo Vue não contém <tbody>, então causará uma incompatibilidade. Para garantir a correspondência correta, certifique-se de escrever um HTML válido em seus templates.

Você pode usar um validador de HTML como o W3C Markup Validation Service (opens new window) ou HTML-validate (opens new window) para verificar seus templates em desenvolvimento.