React Streaming: Прогресивний Server-Side Rendering для оптимізованого користувацького досвіду

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

Що таке Server-Side Rendering (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. Додавання тегу скрипта для гідратації: Включіть тег скрипта в 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 (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.
      Завантаження...
}>