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 използва ReactDOMServer.renderToPipeableStream() API за поточно предаване на 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(): Във вашия сървърен код използвайте ReactDOMServer.renderToPipeableStream() API, за да рендирате вашето 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.
      Зареждане...
}>