Стриминг HTML почти в любом порядке
Долго думал, чем мне может быть полезен декларативный Shadow DOM. Это такая конструкция, которая позволяет внутри template указать какой-то html, добавить этому шаблону атрибут shadowrootmode, всё это вместе со слотами. Вот пример кода:
В примере контент из
Выглядит интересно, но я всё не понимал, как мне это дружить с фреймворками, которые уже есть в проектах. Фреймворки давно умеют в шаблоны, слоты сложнее в восприятии, чем JSX, да и внутрь Shadow Root прокинуть стили надо по-особенному.
Важная часть: Declarative Shadow DOM не нуждается в JavaScript. И в статье Крис Хейнс показывает, как это использовать.
1. Вам нужен сервер, который умеет стримить HTML. Таких много на любых языках. Стримить — это отдавать по частям, пропушивая на клиент некоторые кусочки, когда они уже готовы.
2. Для удобства Крис предлагает использовать шаблонизаторы, которые умеют в стриминг. Хотя на самом деле это совсем не обязательно, главное не ошибиться в том, когда какой кусок страницы отдаётся.
3. Сразу отдаём
4. Тут же отдаём
5. Крутим-вертим бизнес-логику, медленно ходим в БД, наполняем слоты данными. Как только данные готовы — отдаём содержимое с указанием, в какой слот его нужно вставить, в HTML-потоке.
6. Отправляем остатки HTML, закрываем теги, досылаем маловажные скрипты.
Самая магия происходит в пунктах 4 и 5. Шаблон страницы мы отдаём сразу, а вот его содержимое — позже. То есть вообще не соблюдаем порядок внутри HTML. Но отрендерится страница в том порядке, в котором вам надо. И всё это без JS на клиенте, он не нужен.
Подобный подход используют многие крупные сервисы: отдают сразу шапку и кусок универсальных стилей, а потом доставляют всё остальное. И этим сервисам приходится сталкиваться с ограничением порядка доставки. Тот же Яндекс.Поиск работает аж в три этапа: шапка, вехний важный результат выдачи, всё остальное. Интересно посмотреть, поможет ли Declarative Shadow DOM здесь и в скорости доставки контента не потерять, и в удобстве разработки не ухудшиться.
Работает DSD в Chrome и Safari, в Firefox довезут в конце февраля, есть полифил.
https://lamplightdev.com/blog/2024/01/10/streaming-html-out-of-order-without-javascript/
Долго думал, чем мне может быть полезен декларативный Shadow DOM. Это такая конструкция, которая позволяет внутри template указать какой-то html, добавить этому шаблону атрибут shadowrootmode, всё это вместе со слотами. Вот пример кода:
<host-element>
<template shadowrootmode="open">
<slot></slot>
</template>
<h2>Light content</h2>
</host-element>
В примере контент из
h2 передвинется внутрь слота, а само содержимое template окажется внутри Shadow Root элемента host-element.Выглядит интересно, но я всё не понимал, как мне это дружить с фреймворками, которые уже есть в проектах. Фреймворки давно умеют в шаблоны, слоты сложнее в восприятии, чем JSX, да и внутрь Shadow Root прокинуть стили надо по-особенному.
Важная часть: Declarative Shadow DOM не нуждается в JavaScript. И в статье Крис Хейнс показывает, как это использовать.
1. Вам нужен сервер, который умеет стримить HTML. Таких много на любых языках. Стримить — это отдавать по частям, пропушивая на клиент некоторые кусочки, когда они уже готовы.
2. Для удобства Крис предлагает использовать шаблонизаторы, которые умеют в стриминг. Хотя на самом деле это совсем не обязательно, главное не ошибиться в том, когда какой кусок страницы отдаётся.
3. Сразу отдаём
head со всеми метаданными, ссылками на стили и ресурсы, которые очень нужны для корректной работы страницы, чтобы браузер уже начал их выкачивать, пока вы готовите остальное.4. Тут же отдаём
template с пустыми именованными слотами. В этот момент браузер поймёт, что ему нужно будет в слоты что-то вставить, как только они приедут в разметке.5. Крутим-вертим бизнес-логику, медленно ходим в БД, наполняем слоты данными. Как только данные готовы — отдаём содержимое с указанием, в какой слот его нужно вставить, в HTML-потоке.
6. Отправляем остатки HTML, закрываем теги, досылаем маловажные скрипты.
Самая магия происходит в пунктах 4 и 5. Шаблон страницы мы отдаём сразу, а вот его содержимое — позже. То есть вообще не соблюдаем порядок внутри HTML. Но отрендерится страница в том порядке, в котором вам надо. И всё это без JS на клиенте, он не нужен.
Подобный подход используют многие крупные сервисы: отдают сразу шапку и кусок универсальных стилей, а потом доставляют всё остальное. И этим сервисам приходится сталкиваться с ограничением порядка доставки. Тот же Яндекс.Поиск работает аж в три этапа: шапка, вехний важный результат выдачи, всё остальное. Интересно посмотреть, поможет ли Declarative Shadow DOM здесь и в скорости доставки контента не потерять, и в удобстве разработки не ухудшиться.
Работает DSD в Chrome и Safari, в Firefox довезут в конце февраля, есть полифил.
https://lamplightdev.com/blog/2024/01/10/streaming-html-out-of-order-without-javascript/