Привет!

Последнюю неделю работал над возможностью стримить ответы от медленных API с сервера на клиент - функционал идентичный связке Await + defer в Remix и добавленный уже и в SvelteKit, и даже в @tanstak/router (который кажется по прежнему очень сырой продукт)

Уже рассматривал эту фичу в предыдущих постах - https://t.me/super_oleg_dev/80

Какой кейс решает Await + defer:

- У нас есть медленное API
- Мы не хотим так медленно отвечать пользователям и вызываем запрос на клиенте
- Но от полученных данных зависит важный функционал страницы

В таком кейсе пользователь увидит контент после следующего водопада (последовательного и блокирующего) событий:

- Ответ от сервера
- Загрузка клиентских скриптов и стилей
- Гидрация приложения
- Запрос в API
- Рендер с необходимыми данными

Отложенная загрузка данных на сервере + стриминг этих данных на клиент позволяет гораздо раньше запустить запрос, и таким образом сильно уменьшить итоговое время до отрисовки важного контента (в каких-то кейсах LCP метрика может как раз отражать это время, но лучше собирать бизнесовые метрики под конкретные продуктовые фичи)

Стриминг отложенных данных возможен практически нативно начиная с 18 реакта, и состоит из нескольких компонентов:

- renderToPipeableStream - новое API для рендеринга разметки на сервере в стриме
- “Телепортация” промисов для каждого отложенного запроса с сервера на клиент
- Suspense - умеет вернуть на сервере фаллбэк для отложенного (suspended) компонента, и перерендерить его на клиенте после резолва

В ближайшей серии постов хочу рассмотреть нашу реализацию по частям, получилось больше информации чем планировал и более сумбурно + технически сложнее, пишите фидбек, если такое не сильно комфортно читать (по крайней мере в формате постов в телеге)