Streaming SSR

• Transfer-Encoding: chunked — HTTP-уровень механизм
• Suspense boundaries делят страницу на независимые chunks
• Fallback UI показывается во время загрузки медленной части
• Out-of-order streaming: быстрые chunks первыми, медленные ждут
• Incompatible с traditional full-page caching — нужен per-chunk cache

// Next.js loading.tsx
export default function Loading() {
  return <Skeleton />;
}

// Or explicit Suspense
<Suspense fallback={<Skeleton />}>
  <SlowProductList />
</Suspense>

• RSC
• Edge Runtime

Streaming SSR (Server-Side Rendering) — это подход к отрисовке веб-страниц, при котором HTML-контент генерируется на сервере и отправляется клиенту по частям, что позволяет пользователю быстрее увидеть содержимое страницы. Это особенно полезно для улучшения пользовательского опыта и SEO, так как поисковые системы могут быстрее индексировать страницы. Важно отметить, что Streaming SSR может значительно сократить время до первого отображения (Time to First Byte, TTFB) и улучшить общую производительность приложения.

Streaming SSR предлагает несколько ключевых преимуществ по сравнению с традиционным подходом к серверной отрисовке:

• Улучшенное время загрузки: Поскольку контент отправляется по частям, пользователи могут начать взаимодействовать с страницей до того, как она полностью загрузится.
• Оптимизация для SEO: Поисковые системы получают полностью отрисованный HTML, что облегчает индексацию и повышает шансы на лучшее ранжирование.
• Снижение нагрузки на сервер: Сервер может обрабатывать запросы более эффективно, отправляя только необходимые данные.

Для реализации Streaming SSR можно использовать такие библиотеки, как React с функцией renderToPipeableStream, которая позволяет потоково генерировать HTML-контент. Например:

import { renderToPipeableStream } from 'react-dom/server';

const { pipe } = renderToPipeableStream(, {
  onShellReady() {
    pipe(res); // res — ответ сервера
  },
});

Для внедрения Streaming SSR в ваше приложение, вам потребуется настроить сервер для поддержки потоковой передачи данных. Рассмотрим пример настройки с использованием Express.js и React.

Первым делом, установите необходимые зависимости:

npm install express react react-dom

Затем создайте серверный файл, например server.js, с следующим содержимым:

import express from 'express';
import { renderToPipeableStream } from 'react-dom/server';
import App from './App';

const app = express();

app.get('/', (req, res) => {
  const { pipe } = renderToPipeableStream(, {
    onShellReady() {
      res.setHeader('Content-Type', 'text/html');
      pipe(res);
    },
  });
});

app.listen(3000, () => {
  console.log('Сервер запущен на http://localhost:3000');
});

Этот код создает простой сервер, который использует Streaming SSR для отрисовки компонента App. При обращении к корневому маршруту, сервер начинает отправлять HTML-контент клиенту по частям. Это позволяет пользователю быстрее увидеть контент, даже если страница полностью не загружена.

Кроме того, вы можете использовать React Router для динамической маршрутизации внутри вашего приложения, что также поддерживает потоковую отрисовку.

В заключение, Streaming SSR — это мощный инструмент для улучшения производительности и SEO ваших веб-приложений. Он позволяет пользователям получать доступ к контенту быстрее и обеспечивает более эффективную работу серверов.

Streaming SSR (Server-Side Rendering) — это метод прогрессивной отрисовки веб-страниц, позволяющий передавать контент пользователю по частям, что значительно сокращает время загрузки и улучшает пользовательский опыт. С помощью таких технологий, как React и Node.js, можно реализовать Streaming SSR, используя такие библиотеки, как ReactDOMServer и express. Например, команда npm install express react react-dom позволяет установить необходимые зависимости для разработки.

Streaming SSR представляет собой усовершенствованный подход к традиционному серверному рендерингу, где сервер может отправлять HTML-контент клиенту по частям, а не ждать полной обработки страницы. Это позволяет пользователю видеть часть контента сразу, что существенно улучшает восприятие скорости загрузки сайта.

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

Для реализации Streaming SSR можно использовать такие инструменты, как ReactDOMServer.renderToPipeableStream. Пример использования:

import { renderToPipeableStream } from 'react-dom/server';

const stream = renderToPipeableStream(, {
  onShellReady() {
    stream.pipe(res);
  },
});

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