React Streaming: Progressives Server-Side Rendering für optimierte Benutzererfahrung

In der Welt der Webentwicklung ist die Bereitstellung einer schnellen und reaktionsschnellen Benutzererfahrung von größter Bedeutung. Benutzer erwarten, dass Websites schnell geladen werden und ohne Verzögerung interaktiv sind. React, eine beliebte JavaScript-Bibliothek zum Erstellen von Benutzeroberflächen, bietet eine leistungsstarke Technik namens Streaming Server-Side Rendering (SSR), um dieser Herausforderung zu begegnen. Dieser Artikel befasst sich mit dem Konzept von React Streaming SSR und untersucht dessen Vorteile, Implementierung und Auswirkungen auf die Website-Leistung und Benutzererfahrung.

Was ist Server-Side Rendering (SSR)?

Traditionelles clientseitiges Rendering (CSR) bedeutet, dass der Browser die HTML-, JavaScript- und CSS-Dateien herunterlädt und den Inhalt dann clientseitig rendert. Obwohl flexibel, kann dieser Ansatz zu einer verzögerten initialen Darstellung führen, da der Benutzer warten muss, bis alle Ressourcen heruntergeladen und der JavaScript-Code ausgeführt wurde, bevor er Inhalte sieht. SSR hingegen rendert die React-Komponenten auf dem Server und sendet das vollständig gerenderte HTML an den Client. Dies führt zu einer schnelleren initialen Ladezeit, da der Browser vollständig formatiertes HTML erhält, das sofort angezeigt werden kann.

Die Einschränkungen des traditionellen SSR

Während das traditionelle SSR eine deutliche Verbesserung gegenüber dem CSR bietet, hat es seine eigenen Einschränkungen. Beim traditionellen SSR muss die gesamte Anwendung auf dem Server gerendert werden, bevor HTML an den Client gesendet wird. Dies kann ein Engpass sein, insbesondere bei komplexen Anwendungen mit mehreren Komponenten und Datenabhängigkeiten. Die Time to First Byte (TTFB) kann hoch sein, was zu einer empfundenen Langsamkeit für den Benutzer führt.

React Streaming SSR tritt auf den Plan: Ein progressiver Ansatz

React Streaming SSR überwindet die Einschränkungen des traditionellen SSR, indem es einen progressiven Ansatz verfolgt. Anstatt darauf zu warten, dass die gesamte Anwendung auf dem Server gerendert wird, zerlegt Streaming SSR den Rendering-Prozess in kleinere "Chunks" (Teile) und streamt diese "Chunks" an den Client, sobald sie verfügbar sind. Dies ermöglicht es dem Browser, Inhalte viel früher anzuzeigen, wodurch die wahrgenommene Leistung verbessert und die TTFB reduziert wird. Stellen Sie es sich wie ein Restaurant vor, das Ihr Essen in Etappen zubereitet: Die Vorspeise wird zuerst serviert, dann der Hauptgang und schließlich das Dessert, anstatt darauf zu warten, dass das gesamte Essen auf einmal fertig ist.

Vorteile von React Streaming SSR

• Schnellere initiale Ladezeit: Durch das Streamen von HTML-Chunks an den Client kann der Browser Inhalte viel früher anzeigen, was zu einer schnelleren wahrgenommenen Ladezeit und einer verbesserten Benutzerbindung führt.
• Verbesserte Time to First Byte (TTFB): Streaming SSR reduziert die TTFB, indem der initiale HTML-Chunk gesendet wird, sobald er fertig ist, anstatt auf das vollständige Rendering der Anwendung zu warten.
• Verbesserte Benutzererfahrung: Eine schnellere initiale Ladezeit führt zu einer besseren Benutzererfahrung, da Benutzer nicht auf das Erscheinen der Inhalte warten müssen.
• Besseres SEO: Suchmaschinen können die Inhalte effektiver crawlen und indizieren, da das HTML auf dem Server leicht verfügbar ist.
• Progressive Hydration: Streaming SSR ermöglicht progressive Hydration, bei der der clientseitige React-Code schrittweise Event-Listener anfügt und die Anwendung interaktiv macht, während die HTML-Chunks gestreamt werden.
• Verbesserte Ressourcenauslastung: Durch die Aufteilung des Rendering-Prozesses in kleinere Chunks kann Streaming SSR die Ressourcenauslastung auf dem Server verbessern.

Wie React Streaming SSR funktioniert

React Streaming SSR nutzt die ReactDOMServer.renderToPipeableStream() API, um HTML-Chunks an den Client zu streamen. Diese API gibt einen lesbaren Stream zurück, der an das Antwortobjekt des Servers geleitet werden kann. Hier ist eine vereinfachte Darstellung der Funktionsweise:

1. Der Server empfängt eine Anfrage für eine Seite.
2. Der Server ruft ReactDOMServer.renderToPipeableStream() auf, um die React-Anwendung in einen Stream zu rendern.
3. Der Stream beginnt, HTML-Chunks auszugeben, während die React-Komponenten gerendert werden.
4. Der Server leitet den Stream an das Antwortobjekt weiter und sendet die HTML-Chunks an den Client.
5. Der Browser empfängt die HTML-Chunks und beginnt, sie progressiv anzuzeigen.
6. Sobald alle HTML-Chunks empfangen wurden, hydriert der Browser die React-Anwendung und macht sie interaktiv.

Implementierung von React Streaming SSR

Zur Implementierung von React Streaming SSR benötigen Sie einen Node.js-Server und eine React-Anwendung. Hier ist eine Schritt-für-Schritt-Anleitung:

1. Richten Sie einen Node.js-Server ein: Erstellen Sie einen Node.js-Server mit einem Framework wie Express oder Koa.
2. Installieren Sie React und ReactDOMServer: Installieren Sie die Pakete react und react-dom.
3. Erstellen Sie eine React-Anwendung: Erstellen Sie eine React-Anwendung mit den Komponenten, die Sie auf dem Server rendern möchten.
4. Verwenden Sie ReactDOMServer.renderToPipeableStream(): Verwenden Sie in Ihrem Servercode die ReactDOMServer.renderToPipeableStream() API, um Ihre React-Anwendung in einen Stream zu rendern.
5. Leiten Sie den Stream an das Antwortobjekt weiter: Leiten Sie den Stream an das Antwortobjekt des Servers weiter, um die HTML-Chunks an den Client zu senden.
6. Fehler behandeln: Implementieren Sie eine robuste Fehlerbehandlung, um alle Fehler abzufangen, die während des Rendering-Prozesses auftreten können.
7. Fügen Sie ein Skript-Tag für die Hydration hinzu: Fügen Sie ein Skript-Tag in das HTML ein, um die React-Anwendung clientseitig zu hydrieren.

Beispiel Code-Snippet (Server-Seite):

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}`);
});

Beispiel Code-Snippet (Client-Seite - `client.js`):

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

const root = ReactDOM.hydrateRoot(document,
    
);

Beispiel React App Komponente (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...
}>