React Streaming: Прогрессивная отрисовка на стороне сервера для оптимизированного пользовательского опыта

В мире веб-разработки первостепенное значение имеет обеспечение быстрой и отзывчивой работы пользователя. Пользователи ожидают, что веб-сайты будут быстро загружаться и быть интерактивными без задержек. React, популярная библиотека JavaScript для создания пользовательских интерфейсов, предлагает мощный метод, называемый Streaming Server-Side Rendering (SSR), для решения этой проблемы. В этой статье рассматривается концепция React Streaming SSR, изучаются ее преимущества, реализация и влияние на производительность веб-сайта и удобство использования.

Что такое рендеринг на стороне сервера (SSR)?

Традиционный рендеринг на стороне клиента (CSR) включает в себя загрузку браузером файлов HTML, JavaScript и CSS, а затем рендеринг контента на стороне клиента. Несмотря на гибкость, этот подход может привести к задержке начального рендеринга, поскольку пользователю приходится ждать, пока все ресурсы будут загружены и JavaScript выполнится, прежде чем он увидит какой-либо контент. SSR, с другой стороны, отображает компоненты React на сервере и отправляет полностью отображенный HTML клиенту. Это приводит к более быстрому времени начальной загрузки, поскольку браузер получает полностью сформированный HTML, который можно немедленно отобразить.

Ограничения традиционной SSR

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

Представляем React Streaming SSR: прогрессивный подход

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

Преимущества React Streaming SSR

React Streaming SSR предлагает множество преимуществ для производительности веб-сайта и удобства пользователей:

• Более быстрое время начальной загрузки: передавая HTML-фрагменты клиенту, браузер может начать отображать контент намного раньше, что приводит к более быстрому воспринимаемому времени загрузки и улучшению вовлеченности пользователей.
• Улучшенное время до первого байта (TTFB): Streaming SSR уменьшает TTFB, отправляя начальный HTML-фрагмент, как только он будет готов, а не дожидаясь, пока будет отображено все приложение.
• Улучшенный пользовательский опыт: более быстрое время начальной загрузки приводит к лучшему пользовательскому опыту, поскольку пользователям не приходится ждать появления контента.
• Лучшее SEO: поисковые системы могут более эффективно сканировать и индексировать контент, поскольку HTML легко доступен на сервере.
• Прогрессивная гидратация: Streaming SSR обеспечивает прогрессивную гидратацию, при которой код React на стороне клиента постепенно присоединяет прослушиватели событий и делает приложение интерактивным по мере передачи HTML-фрагментов.
• Улучшенное использование ресурсов: разбивая процесс рендеринга на более мелкие части, Streaming SSR может улучшить использование ресурсов на сервере.

Как работает React Streaming SSR

React Streaming SSR использует API ReactDOMServer.renderToPipeableStream() для передачи HTML-фрагментов клиенту. Этот API возвращает читаемый поток, который можно перенаправить в объект ответа сервера. Вот упрощенная иллюстрация того, как это работает:

1. Сервер получает запрос страницы.
2. Сервер вызывает ReactDOMServer.renderToPipeableStream() для отображения приложения React в поток.
3. Поток начинает генерировать HTML-фрагменты по мере отображения компонентов React.
4. Сервер перенаправляет поток в объект ответа, отправляя HTML-фрагменты клиенту.
5. Браузер получает HTML-фрагменты и начинает отображать их постепенно.
6. После того, как все HTML-фрагменты были получены, браузер гидратирует приложение React, делая его интерактивным.

Реализация React Streaming SSR

Для реализации React Streaming SSR вам понадобится сервер Node.js и приложение React. Вот пошаговое руководство:

1. Настройте сервер Node.js: создайте сервер Node.js, используя такую платформу, как Express или Koa.
2. Установите React и ReactDOMServer: установите пакеты react и react-dom.
3. Создайте приложение React: создайте приложение React с компонентами, которые вы хотите отобразить на сервере.
4. Используйте ReactDOMServer.renderToPipeableStream(): в коде сервера используйте API ReactDOMServer.renderToPipeableStream() для отображения вашего приложения React в поток.
5. Перенаправьте поток в объект ответа: перенаправьте поток в объект ответа сервера, чтобы отправить HTML-фрагменты клиенту.
6. Обрабатывайте ошибки: реализуйте обработку ошибок для перехвата любых ошибок, которые могут возникнуть во время процесса рендеринга.
7. Добавьте тег script для гидратации: включите тег script в HTML, чтобы гидратировать приложение React на стороне клиента.

Пример фрагмента кода (на стороне сервера):

const express = require('express');
const React = require('react');
const ReactDOMServer = require('react-dom/server');
const App = require('./App'); // Ваш компонент React

const app = express();
const port = 3000;

app.get('/', (req, res) => {
  const { pipe, abort } = ReactDOMServer.renderToPipeableStream(, {
    bootstrapModules: [require.resolve('./client')], // Точка входа на стороне клиента
    onShellReady() {
      res.setHeader('content-type', 'text/html; charset=utf-8');
      pipe(res);
    },
    onError(err) {
      console.error(err);
      res.statusCode = 500;
      res.send('
Извините, что-то пошло не так
');
    }
  });

  setTimeout(abort, 10000); // Необязательно: тайм-аут для предотвращения зависания
});

app.use(express.static('public')); // Обслуживание статических ресурсов

app.listen(port, () => {
  console.log(`Сервер прослушивает http://localhost:${port}`);
});

Пример фрагмента кода (на стороне клиента - `client.js`):

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

const root = ReactDOM.hydrateRoot(document,
    
);

Пример компонента приложения React (App.js):

import React, { Suspense } from 'react';

function fetchData() {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve("Данные успешно загружены!");
    }, 2000);
  });
}

function SlowComponent() {
  const [data, setData] = React.useState(null);

  React.useEffect(() => {
    fetchData().then(result => setData(result));
  }, []);

  if (!data) {
    throw new Promise(resolve => setTimeout(resolve, 2000)); // Имитация задержки загрузки
  }

  return 
{data}
;
}

export default function App() {
  return (
    

      
Добро пожаловать в Streaming SSR!
      
Это демонстрация React Streaming SSR.
      Загрузка...
}>