Реактивный рендеринг серверных компонентов React без использования Server Components

Что такое потоковый рендеринг и зачем он нужен?

Традиционный подход к серверному рендерингу (SSR) предполагает полную генерацию страницы до отправки её клиенту. Это значит, что если один ресурс загружается медленно, то вся страница будет отображаться медленнее.

Потоковый рендеринг решает эту проблему, отправляя пользователю уже готовые части страницы сразу после их готовности. Таким образом, пользователь видит контент быстрее, а остальные данные подгружаются постепенно.

Как реализовать потоковый рендеринг без Server Components?

Для реализации потокового рендеринга можно использовать следующие инструменты:

1. defer()

Функция defer() позволяет разделить быстрые и медленные ресурсы. Быстрые ресурсы отправляются немедленно, а медленные начинают подгружаться позже.

import { defer } from '@paretojs/core';
export async function loader(ctx) {
    const userCount = await getCachedUserCount(); // быстрый запрос
    return defer({
        userCount,
        activityFeed: db.query(...), // средний запрос
        analyticsChart: fetchExternalAPI(...) // медленный запрос
    });
}

2. Компоненты <Suspense> и <Await>

Компонент <Suspense> используется для обработки задержек при загрузке данных. Он показывает placeholder пока данные не готовы. Компонент <Await> обертывает каждую секцию, которая должна быть отрендерена асинхронно.

<Suspense fallback={<div>Loading...</div>}>
    <Await resolve={data.activityFeed}>
        {(activityFeed) => <ActivityFeed items={activityFeed}/>}
    </Await>
</Suspense>

3. Функция renderToPipeableStream

Эта функция под капотом реализует потоковую передачу данных. Она принимает компонент и возвращает поток, который может быть отправлен браузеру.

Таким образом, используя эти три инструмента, можно легко организовать потоковый рендеринг без необходимости внедрения сложных решений вроде Server Components.