React Streaming: Progresszív szerveroldali renderelés az optimalizált felhasználói élményért

A webfejlesztés világában a gyors és reszponzív felhasználói élmény biztosítása kulcsfontosságú. A felhasználók elvárják, hogy a webhelyek gyorsan betöltődjenek és késedelem nélkül interaktívak legyenek. A React, egy népszerű JavaScript könyvtár a felhasználói felületek építésére, egy hatékony technikát kínál, a Streaming Server-Side Rendering (SSR)-t, hogy kezelje ezt a kihívást. Ez a cikk a React Streaming SSR koncepciójába nyújt betekintést, feltárva annak előnyeit, implementációját, valamint a webhely teljesítményére és a felhasználói élményre gyakorolt hatását.

Mi az a szerveroldali renderelés (SSR)?

A hagyományos kliensoldali renderelés (CSR) magában foglalja, hogy a böngésző letölti a HTML-, JavaScript- és CSS-fájlokat, majd a tartalmat a kliens oldalon rendereli. Bár rugalmas, ez a megközelítés késleltetett kezdeti renderelést eredményezhet, mivel a felhasználónak várnia kell az összes erőforrás letöltésére és a JavaScript végrehajtására, mielőtt bármilyen tartalmat látna. Az SSR viszont a React komponenseket a szerveren rendereli, és a teljesen renderelt HTML-t küldi el a kliensnek. Ez gyorsabb kezdeti betöltési időt eredményez, mivel a böngésző teljesen formázott HTML-t kap, amelyet azonnal meg tud jeleníteni.

A hagyományos SSR korlátai

Bár a hagyományos SSR jelentős javulást kínál a CSR-hez képest, vannak saját korlátai. A hagyományos SSR-ben a teljes alkalmazást renderelni kell a szerveren, mielőtt bármilyen HTML-t elküldenének a kliensnek. Ez szűk keresztmetszetet jelenthet, különösen összetett alkalmazásoknál, amelyek több komponenst és adatszinkronizációt tartalmaznak. Az első bájtig eltelt idő (TTFB) magas lehet, ami a felhasználó számára észlelt lassúságot eredményez.

Megérkezett a React Streaming SSR: egy progresszív megközelítés

A React Streaming SSR a hagyományos SSR korlátait progresszív megközelítéssel hidalja át. Ahelyett, hogy megvárná a teljes alkalmazás szerveroldali renderelését, a Streaming SSR kisebb darabokra bontja a renderelési folyamatot, és ezeket a darabokat streameli a kliensnek, amint azok elérhetővé válnak. Ez lehetővé teszi a böngésző számára, hogy sokkal korábban megkezdje a tartalom megjelenítését, javítva az észlelt teljesítményt és csökkentve a TTFB-t. Gondoljon rá úgy, mint egy étteremre, amely szakaszosan készíti el az ételét: először az előételt szolgálják fel, majd a főételt, végül a desszertet, ahelyett, hogy egyszerre várnánk a teljes étkezés elkészültére.

A React Streaming SSR előnyei

A React Streaming SSR számos előnyt kínál a webhely teljesítménye és a felhasználói élmény szempontjából:

• Gyorsabb kezdeti betöltési idő: A HTML-darabok kliensre streamelésével a böngésző sokkal korábban megkezdheti a tartalom megjelenítését, ami gyorsabb észlelt betöltési időt és jobb felhasználói elkötelezettséget eredményez.
• Javított első bájtig eltelt idő (TTFB): A Streaming SSR csökkenti a TTFB-t azáltal, hogy az első HTML-darabot azonnal elküldi, amint az elkészült, ahelyett, hogy megvárná a teljes alkalmazás renderelését.
• Fokozott felhasználói élmény: A gyorsabb kezdeti betöltési idő jobb felhasználói élményhez vezet, mivel a felhasználóknak nem kell várniuk a tartalom megjelenésére.
• Jobb SEO: A keresőmotorok hatékonyabban tudják feltérképezni és indexelni a tartalmat, mivel a HTML könnyen elérhető a szerveren.
• Progresszív hidratálás: A Streaming SSR lehetővé teszi a progresszív hidratálást, ahol a kliensoldali React kód fokozatosan csatol eseményfigyelőket és teszi interaktívvá az alkalmazást, amint a HTML-darabok streamelve vannak.
• Javított erőforrás-kihasználás: A renderelési folyamat kisebb darabokra bontásával a Streaming SSR javíthatja az erőforrás-kihasználást a szerveren.

Hogyan működik a React Streaming SSR?

A React Streaming SSR a ReactDOMServer.renderToPipeableStream() API-t használja a HTML-darabok kliensre streameléséhez. Ez az API egy olvasható streamet ad vissza, amely a szerver válaszobjektumához csövezhető. Íme egy egyszerűsített illusztráció a működéséről:

1. A szerver kérést kap egy oldalra.
2. A szerver meghívja a ReactDOMServer.renderToPipeableStream() függvényt a React alkalmazás streamké rendereléséhez.
3. A stream HTML-darabokat kezd kibocsátani, amint a React komponensek renderelődnek.
4. A szerver a streamet a válaszobjektumhoz csövezi, elküldve a HTML-darabokat a kliensnek.
5. A böngésző megkapja a HTML-darabokat, és progresszíven megjeleníti azokat.
6. Miután az összes HTML-darab megérkezett, a böngésző hidratálja a React alkalmazást, interaktívvá téve azt.

React Streaming SSR implementálása

A React Streaming SSR implementálásához Node.js szerverre és React alkalmazásra lesz szüksége. Íme egy lépésről lépésre útmutató:

1. Node.js szerver beállítása: Hozzon létre egy Node.js szervert olyan keretrendszerrel, mint az Express vagy a Koa.
2. React és ReactDOMServer telepítése: Telepítse a react és react-dom csomagokat.
3. React alkalmazás létrehozása: Hozzon létre egy React alkalmazást azokkal a komponensekkel, amelyeket a szerveren szeretne renderelni.
4. Használja a ReactDOMServer.renderToPipeableStream() függvényt: A szerveroldali kódban használja a ReactDOMServer.renderToPipeableStream() API-t a React alkalmazás streamké rendereléséhez.
5. Csövezze a streamet a válaszobjektumhoz: Csövezze a streamet a szerver válaszobjektumához, hogy elküldje a HTML-darabokat a kliensnek.
6. Hibakezelés: Implementáljon robusztus hibakezelést a renderelési folyamat során előforduló hibák elkapására. Kezelje megfelelően a hibákat a szerver és a kliens oldalon, hogy elkerülje a váratlan viselkedést.
7. Adjon hozzá egy szkript taget a hidratáláshoz: Helyezzen el egy szkript taget a HTML-ben a React alkalmazás kliensoldali hidratálásához.

Példa kódrészlet (szerveroldalon):

const express = require('express');
const React = require('react');
const ReactDOMServer = require('react-dom/server');
const App = require('./App'); // Your React component

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

app.get('/', (req, res) => {
  const { pipe, abort } = ReactDOMServer.renderToPipeableStream(, {
    bootstrapModules: [require.resolve('./client')], // Client-side entry point
    onShellReady() {
      res.setHeader('content-type', 'text/html; charset=utf-8');
      pipe(res);
    },
    onError(err) {
      console.error(err);
      res.statusCode = 500;
      res.send('
Sorry, something went wrong
');
    }
  });

  setTimeout(abort, 10000); // Optional: Timeout to prevent indefinite hanging
});

app.use(express.static('public')); // Serve static assets

app.listen(port, () => {
  console.log(`Server listening at http://localhost:${port}`);
});

Példa kódrészlet (kliensoldalon - `client.js`):

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

const root = ReactDOM.hydrateRoot(document,
    
);

Példa React App komponens (App.js):

import React, { Suspense } from 'react';

function fetchData() {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve("Data loaded successfully!");
    }, 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)); // Simulate a loading delay
  }

  return 
{data}
;
}

export default function App() {
  return (
    

      
Welcome to Streaming SSR!
      
This is a demonstration of React Streaming SSR.
      Loading...
}>