Фронтенд-фреймворки, которые умеют рендерить приложение на сервере (React, Vue, Angular), должны гидрировать страницу (устанавливать обработчики событий на отрендеренную сервером вёрстку), чтобы она стала интерактивной. При таком подходе есть проблема — на клиент летит много ненужного кода, например, код неинтерактивных компонентов (заголовки, врезки, компоненты для типографики и т.п.). Поэтому команда Лукаса при работе над большим новостным порталом реализовала частичную гидрацию страницы. При таком подходе на клиент прилетает только тот код, который нужен для работы интерактивных элементов.
Идея несложная. Нужно отрендерить статичную вёрстку и отметить в ней элементы, которые нужно гидрировать. Для отметки таких элементов, ребята использовали тег
<script type="application/hydration-marker" />. Далее клиентский скрипт находит такие элементы и гидрирует их. Таким образом на странице получается несколько независимых мини-приложений.Статья очень полезная. Если вы разрабатываете большой проект с использованием SSR и большинство ваших компонентов неинтерактивны, то стоит обратить внимание на этот подход.
#ssr #performance #react
https://medium.com/@luke_schmuke/how-we-achieved-the-best-web-performance-with-partial-hydration-20fab9c808d5
