Команда Chrome предложила довольно необычное API для частичного обновления HTML. В разметке можно оставить специальный маркер:
<div>
<?marker name="placeholder">
</div>
Браузер игнорирует
<?marker>, поэтому такой код уже сейчас работает как обычный HTML.Позже, когда данные будут готовы, достаточно добавить:
<template for="placeholder">
Here is some <em>HTML content</em>!
</template>
После этого содержимое шаблона автоматически займёт место маркера.
На практике это означает, что сервер может начать отдавать страницу ещё до того, как готовы все данные. Не нужно искать элементы по id, не нужно писать код для замены заглушек, не нужно придумывать собственный протокол поверх HTML.
Несколько лет назад стриминг HTML ассоциировался почти только с React. Штош.
Самое приятное, что
<?marker> — не какой-то новый синтаксис. Processing instructions существуют ещё со времён XML, а браузеры уже умеют спокойно пропускать их в HTML. Поэтому использовать такую разметку можно хоть сегодня. Для старых браузеров есть полифилл от Google Chrome Labs.Статья:
https://developer.chrome.com/blog/declarative-partial-updates
Полифилл:
https://github.com/GoogleChromeLabs/template-for-polyfill
#html