Цена гидратации: selective, progressive, острова, resumability

Страница новостной статьи: 2 000 слов текста, один бокс комментариев, кнопка лайка. Классическая полностраничная гидратация гоняет фреймворк по всем 2 000 словам текста — делая текст без какой-либо интерактивности «интерактивным». Бандл больше, чем нужно, и длинная задача гидратации блокирует главный поток, взрывая INP. Есть лучшие варианты.

Почему гидратация дорогая. Гидратация примерно удваивает работу рендера — дерево рендерится один раз на сервере и фактически рендерится снова на клиенте. Но это хуже простого удвоения, потому что клиентский рендер гоняется на устройстве пользователя, которое может быть средним телефоном на порядок медленнее вашего сервера. И это всё JavaScript на главном потоке: скачать бандл, распарсить и скомпилировать его (работа V8), потом гонять дерево компонентов и цеплять обработчики. На большом приложении это сотни миллисекунд — секунды времени главного потока, во время которых страница выглядит готовой, но не готова. Всё это окно — «зловещая долина» SSR — страница нарисована и выглядит интерактивной, пользователь пытается взаимодействовать, и ввод отбрасывается или встаёт в очередь за длинной задачей гидратации, взрывая INP.

Full vs selective гидратация. Классическая гидратация React — полная и нетерпеливая: всё приложение гидрируется одним блокирующим проходом до того, как что-либо станет интерактивным. React 18 ввёл selective hydration: с границами Suspense части дерева гидрируются независимо, и React приоритизирует гидратацию того, с чем пользователь только что взаимодействовал. Если пользователь кликает по ещё-не-гидрированной секции, React гидрирует эту секцию первой. Гидратация становится прерываемой — может уступить вводу посреди прохода. Selective hydration не убирает суммарную цену; она переупорядочивает её.

Progressive hydration и архитектура островов. Более глубокий фикс — гидрировать меньше. Архитектура островов (Astro, Marko, Fresh) стартует от противоположного дефолта: страница — это статический HTML, и только конкретные интерактивные компоненты — «острова» — шлют JavaScript и гидрируются. Пост блога на 95% текст: с островами эти 95% шлют ноль JavaScript и никогда не гидрируются, и только бокс комментариев и кнопка лайка несут JS. Каждый остров гидрируется независимо, и ему можно сказать, когда (client:visible гидрирует при скролле в зону видимости, client:idle когда главный поток свободен).

Resumability: пропуск гидратации совсем. Qwik доводит идею до предела через resumability. Вместо переисполнения дерева компонентов на клиенте, чтобы пересобрать состояние и обработчики, Qwik сериализует всё состояние приложения — включая то, какой обработчик к чему прицеплен — в сам HTML. Клиент не перерендеривает, чтобы гидрироваться; он возобновляется с сериализованного состояния, цепляя обработчик только когда пользователь реально взаимодействует с этим конкретным элементом. Стартовый JavaScript приближается к нулю независимо от размера приложения. Компромисс — более сложный формат сериализации и фреймворк, построенный вокруг него с нуля.