Декларативный точечный апдейт страниц: прощай, тяжелый JS для стриминга? ⚡️
Declarative Partial Updates: нелинейный HTML-стриминг, маркеры, template и новые API для обновления страниц без лишнего JS.
На майском Google I/O 2026 команда Chrome презентовала крутую штуку, которая прямо сейчас закладывается в стандарты HTML — Declarative Partial Updates. Фича уже доступна для тестов в Chrome 148.
Суть проблемы: классический HTML-стриминг всегда был строго линейным. Браузер парсит документ сверху вниз по мере загрузки байтов. Если у вас на странице есть «тяжелый» блок (например, блок рекомендаций, требующий долгого запроса к БД), серверу приходилось либо придерживать весь стрим, либо разработчики городили костыли на JS, догружая куски через AJAX/Fetch и руками вставляя их в DOM.
Новое API решает это на уровне самого браузера с помощью Out-of-order HTML streaming (нелинейного стриминга).
Как это работает?
В то место, где контент появится позже, вставляется специальная процессинговая инструкция-маркер:
<div><? marker name="deferred-box" ?></div>Браузер спокойно рендерит всю остальную страницу, отдавая пользователю быстрый First Paint. Когда сервер наконец-то посчитал тяжелые данные, он докидывает в этот же поток обычный тег <template> с указанием таргета:
<template for="deferred-box">
<div class="heavy-widget">Тут лежат данные из БД!</div>
</template>Браузер на лету подхватывает этот шаблон и декларативно, вообще без участия JavaScript, «впиливает» его контент ровно на место маркера deferred-box.
Что еще завезли в этот пак?
Помимо стриминга из коробки, обновили и JS-методы для вставки HTML. Вместо старого и небезопасного innerHTML появился расширенный набор статических и стриминговых API: setHTML(), setHTMLUnsafe(), а также совершенно новые методы вроде streamHTMLUnsafe() и appendHTML(). Они позволяют реализовать SPA-подобные точечные обновления страниц (в стиле HTMX), скармливая браузеру куски HTML-потоков прямо через встроенные веб-трансляции (Streams API).
Зачем это нужно?
1. Архитектура Islands (Острова): Привет Astro и аналогам. Теперь статические «острова» и динамические блоки можно собирать и обновлять силами самого HTML-парсера.
2. Отказ от лишнего JS: Больше не нужно тащить клиентские скрипты только ради того, чтобы поймать чанк с сервера и сделать appendChild.
3. Перформанс: Меньше нагрузка на процессор, так как парсинг и вставка происходят на самом низком уровне движка браузера.
Пока инициатива обкатывается в Chromium, на npm уже вовсю пилят официальные полифиллы (template-for-polyfill). Кажется, через пару лет концепция Server-Driven UI выйдет на абсолютно новый уровень.
Как вам идея внедрения <?таких_конструкций?> обратно в современный HTML? Не пахнет ли старым добрым PHP/BigPipe, но теперь на стероидах прямо в браузере? 👇