tgoop.com/super_oleg_dev/128
Last Update:
Основная сложность для фреймворка tramvai в реализации этой фичи было полное отсутствие поддержки стриминга HTML разметки.
Эксперименты со стримингом были, но в целом есть ряд минусов, рассмотренных в этом посте - https://www.tgoop.com/super_oleg_dev/49, из-за которых долго не развивали идею. Но концепция Await + defer очень уж хороша, что бы ее не использовать.
Плюс недавно в твиттере увидел интересную мысль, что если в целом для пользователя есть возможность благодаря стримингу сильно ускорить ответ и улучшить UX, этот пользователь в итоге принесет больше денег и возросшая сложность и нагрузка на сервера того стоит)
Итак, как сейчас работает трамвай что бы отрендерить HTML:
- Есть заранее заданная схема HTML страницы со слотами (например мета-теги, инлайн скрипты, head скрипты, body скрипты и т.д.)
- На разных этапах обработки запроса на эти слоты регистрируются соответствующие ресурсы (допустим сходили в API, добавили нужный title, инлайн-скрипт или json-ld)
- В самом конце, рендерим React компонент через renderToString, и получаем окончательный список ресурсов (до рендера не знаем ссылки на JS/CSS используемых на странице loadable компонентов)
- Склеиваем все по схеме, отдаем ответ клиенту одним чанком
Вот как выглядит флоу генерации HTML:
// тут по дефолту renderToString
renderReact()
// после рендера знаем все JS/CSS которые нужны на странице
addScriptsAndStyles()
// сериализуем данные для передачи на клиент
dehydrateState()
// генерируем HTML по схеме
generateHtml()
И для наглядности, представим схему страницы в очень упрощенном варианте:
<head>
<META />
<LINKS />
<SCRIPTS />
</head>
<body>
<APP />
<TAIL_SCRIPTS />
</body>
Тут <APP /> - это часть разметки которую рендерит React.
При потоковом рендеринге, я решил не ломать полностью существующий флоу ответа, и не начинать стримить раньше, а делать это в том же месте где раньше отдавали всю страницу целиком - тогда мы будем уверены что все необходимые данные уже получены, а ресурсы зарегистрированы, и не нужно будет изобретать свои механизмы чтобы “достримить” различные теги на страницу и к примеру вставить в <head> после того, как уже отдали соответствующий закрывающий тег (пример проблемы)
BY SuperOleg dev notes
Share with your friend now:
tgoop.com/super_oleg_dev/128