Чтобы минимизировать разрыв между TTI и FCP, мы выполняем несколько запросов одновременно и отправляем результат чанками, по мере их генерации. Мы оправляем данные в процессе генерации, а не ждем когда сгенерируется весь HTML. Такой подход позволяет улучшить Time To First Byte.
Чтобы реализовать такой подход в React вместо renderToString () мы можем использовать
renderToNodeStream () Также мы React Suspense мы можем использовать
асинхронный рендеринг и для этой цели.
Во Vue мы можем использовать
renderToStream ().
На клиенте, вместо того чтобы загружать все приложение сразу, мы можем загружать компоненты постепенно. Сначала приложение разбивается на части, каждой из которых соответствует свой скрипт. Эти скрипты генерируются при помощи code splitting. И потом каждая гидрируется (hydrate) отдельно. Сначала мы гидрируем самые критичные части. Еще мы можем отложить гидрацию до тех пор, пока компонент не появится во вьюпорте. Или до момента когда основной поток будет не занят
Для Vue Маркус Оберленер (Markus Oberlehner) опубликовал руководство по уменьшению TTI в SSR-приложениях с
помощью гидрации на user-interaction, а также
vue-lazy-hydration — плагин, который позволяет гидратировать компоненты по мере изменения их видимости или при определенных видах взаимодействия пользователя с компонентом. Команда Angular работает над прогрессивной гидрацией с помощью
Ivy Universal. Еще вы можете реализовать частичную
гидрацию с помощью Preact и Next. js.