React Streaming: Progresywne Renderowanie po Stronie Serwera dla Zoptymalizowanego Doświadczenia Użytkownika

W świecie tworzenia stron internetowych kluczowe jest zapewnienie szybkiego i responsywnego doświadczenia użytkownika. Użytkownicy oczekują, że strony internetowe będą ładować się szybko i będą interaktywne bez opóźnień. React, popularna biblioteka JavaScript do tworzenia interfejsów użytkownika, oferuje potężną technikę zwaną Streaming Server-Side Rendering (SSR), aby sprostać temu wyzwaniu. Ten artykuł zagłębia się w koncepcję React Streaming SSR, analizując jego korzyści, implementację oraz wpływ na wydajność i doświadczenie użytkownika witryny.

Co to jest Renderowanie po Stronie Serwera (SSR)?

Tradycyjne renderowanie po stronie klienta (CSR) polega na tym, że przeglądarka pobiera pliki HTML, JavaScript i CSS, a następnie renderuje treść po stronie klienta. Chociaż jest to elastyczne, podejście to może prowadzić do opóźnionego początkowego renderowania, ponieważ użytkownik musi poczekać na pobranie wszystkich zasobów i wykonanie JavaScriptu, zanim zobaczy jakąkolwiek treść. SSR natomiast renderuje komponenty React na serwerze i wysyła w pełni wyrenderowany kod HTML do klienta. Skutkuje to szybszym początkowym czasem ładowania, ponieważ przeglądarka otrzymuje w pełni uformowany kod HTML, który można natychmiast wyświetlić.

Ograniczenia Tradycyjnego SSR

Chociaż tradycyjny SSR oferuje znaczącą poprawę w stosunku do CSR, ma on swoje własne ograniczenia. W tradycyjnym SSR cała aplikacja musi zostać wyrenderowana na serwerze, zanim jakikolwiek kod HTML zostanie wysłany do klienta. Może to stanowić wąskie gardło, zwłaszcza w przypadku złożonych aplikacji z wieloma komponentami i zależnościami danych. Czas do pierwszego bajtu (TTFB) może być wysoki, co prowadzi do postrzeganego spowolnienia dla użytkownika.

Wprowadzenie React Streaming SSR: Progresywne Podejście

React Streaming SSR przezwycięża ograniczenia tradycyjnego SSR, przyjmując progresywne podejście. Zamiast czekać na wyrenderowanie całej aplikacji na serwerze, Streaming SSR dzieli proces renderowania na mniejsze fragmenty i przesyła te fragmenty do klienta w miarę ich dostępności. Pozwala to przeglądarce na wcześniejsze rozpoczęcie wyświetlania treści, poprawiając postrzeganą wydajność i zmniejszając TTFB. Pomyśl o tym jak o restauracji przygotowującej posiłek etapami: najpierw serwowana jest przystawka, potem danie główne, a na końcu deser, zamiast czekać, aż cały posiłek będzie gotowy jednocześnie.

Korzyści z React Streaming SSR

React Streaming SSR oferuje wiele korzyści dla wydajności i doświadczenia użytkownika witryny:

• Szybszy początkowy czas ładowania: Przesyłając fragmenty HTML do klienta, przeglądarka może zacząć wyświetlać treści znacznie wcześniej, co skutkuje szybszym postrzeganym czasem ładowania i lepszym zaangażowaniem użytkowników.
• Lepszy czas do pierwszego bajtu (TTFB): Streaming SSR skraca TTFB, wysyłając pierwszy fragment HTML natychmiast po jego gotowości, zamiast czekać na wyrenderowanie całej aplikacji.
• Ulepszone doświadczenie użytkownika: Szybszy początkowy czas ładowania prowadzi do lepszego doświadczenia użytkownika, ponieważ użytkownicy nie są zmuszeni czekać na pojawienie się treści.
• Lepsze SEO: Wyszukiwarki mogą efektywniej przeszukiwać i indeksować treści, ponieważ kod HTML jest łatwo dostępny na serwerze.
• Progresywna Hydratacja: Streaming SSR umożliwia progresywną hydratację, gdzie kod React po stronie klienta stopniowo dołącza słuchacze zdarzeń i sprawia, że aplikacja jest interaktywna w miarę przesyłania strumieniowego fragmentów HTML.
• Lepsze wykorzystanie zasobów: Dzieląc proces renderowania na mniejsze fragmenty, Streaming SSR może poprawić wykorzystanie zasobów na serwerze.

Jak działa React Streaming SSR

React Streaming SSR wykorzystuje API ReactDOMServer.renderToPipeableStream() do strumieniowania fragmentów HTML do klienta. To API zwraca strumień odczytu, który można przekierować do obiektu odpowiedzi serwera. Oto uproszczona ilustracja, jak to działa:

1. Serwer odbiera żądanie strony.
2. Serwer wywołuje ReactDOMServer.renderToPipeableStream() w celu wyrenderowania aplikacji React do strumienia.
3. Strumień zaczyna emitować fragmenty HTML w miarę renderowania komponentów React.
4. Serwer przekierowuje strumień do obiektu odpowiedzi, wysyłając fragmenty HTML do klienta.
5. Przeglądarka odbiera fragmenty HTML i zaczyna je progresywnie wyświetlać.
6. Po odebraniu wszystkich fragmentów HTML przeglądarka nawadnia aplikację React, czyniąc ją interaktywną.

Implementacja React Streaming SSR

Aby zaimplementować React Streaming SSR, potrzebny będzie serwer Node.js i aplikacja React. Oto przewodnik krok po kroku:

1. Konfiguracja serwera Node.js: Utwórz serwer Node.js przy użyciu frameworka takiego jak Express lub Koa.
2. Instalacja React i ReactDOMServer: Zainstaluj pakiety react i react-dom.
3. Tworzenie aplikacji React: Utwórz aplikację React z komponentami, które chcesz renderować na serwerze.
4. Użycie ReactDOMServer.renderToPipeableStream(): W kodzie serwera użyj API ReactDOMServer.renderToPipeableStream() do renderowania aplikacji React do strumienia.
5. Przekierowanie strumienia do obiektu odpowiedzi: Przekieruj strumień do obiektu odpowiedzi serwera, aby wysłać fragmenty HTML do klienta.
6. Obsługa błędów: Zaimplementuj obsługę błędów, aby przechwycić wszelkie błędy, które mogą wystąpić podczas procesu renderowania.
7. Dodanie znacznika skryptu do nawadniania: Dołącz znacznik skryptu w HTML, aby nawodnić aplikację React po stronie klienta.

Przykład fragmentu kodu (po stronie serwera):

const express = require('express');
const React = require('react');
const ReactDOMServer = require('react-dom/server');
const App = require('./App'); // Twój komponent React

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

app.get('/', (req, res) => {
  const { pipe, abort } = ReactDOMServer.renderToPipeableStream(, {
    bootstrapModules: [require.resolve('./client')], // Punkt wejścia po stronie klienta
    onShellReady() {
      res.setHeader('content-type', 'text/html; charset=utf-8');
      pipe(res);
    },
    onError(err) {
      console.error(err);
      res.statusCode = 500;
      res.send('
Przepraszamy, wystąpił błąd
');
    }
  });

  setTimeout(abort, 10000); // Opcjonalnie: Timeout, aby zapobiec nieskończonemu zawieszaniu się
});

app.use(express.static('public')); // Serwuj zasoby statyczne

app.listen(port, () => {
  console.log(`Serwer nasłuchuje pod adresem http://localhost:${port}`);
});

Przykład fragmentu kodu (po stronie klienta - `client.js`):

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

const root = ReactDOM.hydrateRoot(document,
    
);

Przykład komponentu aplikacji React (App.js):

import React, { Suspense } from 'react';

function fetchData() {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve("Dane zostały pomyślnie załadowane!");
    }, 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)); // Symulacja opóźnienia ładowania
  }

  return 
{data}
;
}

export default function App() {
  return (
    

      
Witamy w Streaming SSR!
      
To jest demonstracja React Streaming SSR.
      Ładowanie...
}>