Гидратация клиентской части

Гидратация относится к процессу на стороне клиента, во время которого Vue получает статический HTML, отправленный сервером, и превращает его в динамический DOM, который может реагировать на изменения данных на стороне клиента.

В файле entry-client.js приложение просто монтируется с помощью этой строки:

app.mount('#app')

Но, поскольку сервер уже отрисовал разметку, очевидно, что не следует её выбрасывать и заново создавать все элементы DOM. Вместо этого, лучше «гидратировать» статическую разметку, чтобы сделать её интерактивной.

Vue предоставляет метод createSSRApp для использования в коде клиента (в данном случае в файле entry-client.js), чтобы указать Vue на необходимость гидратировать существующий статический HTML вместо повторного пересоздания всех элементов DOM.

Предостережения при гидратации

Vue проверяет соответствие виртуального дерева DOM, сгенерированного на стороне клиента, со структурой DOM, отрисованной на стороне сервера. Если будет выявлено расхождение, то гидратация будет прекращена, существующий DOM выброшен и отрисовка выполнится с нуля. В консоли браузера выведется предупреждение, но приложение будет работать.

Первый ключевой момент, стоит убедиться, что SSR работает — сравнить что состояние приложения одинаково и на клиенте и на сервере. Будьте особенно внимательны, чтобы не зависеть от API, специфичных для браузера (таких как ширина окна, возможности устройства или localStorage) или для сервера (таких как встроенные модули Node), и будьте внимательны в тех случаях, когда один и тот же код может давать разные результаты при выполнении в разных местах (например, при использовании временных зон, меток времени, нормализации URL или генерации случайных чисел). Более подробную информацию смотрите в разделе написание универсального кода.

Второй ключевой момент, о котором следует помнить при использовании SSR + клиентской гидратации заключается в том, что недопустимый HTML может быть изменён браузером. Например, для такого шаблона Vue:

<table>
  <tr>
    <td>hi</td>
  </tr>
</table>

Браузер автоматически добавит <tbody> внутри <table>. Однако виртуальный DOM, сгенерированный Vue не содержит <tbody>, что приведёт к несоответствию. Поэтому нужно проверять, что в шаблонах написан корректный HTML.

Для этого можно воспользоваться валидатором HTML, например, сервисом W3C Markup Validation (opens new window) или HTML-validate (opens new window) для проверки шаблонов при разработке.