Routen vorab rendern – mit Reaktions-Snap

Sie verwenden kein serverseitiges Rendering, möchten aber trotzdem die Leistung Ihrer React-Website verbessern? Probieren Sie Pre-Rendering aus.

Houssein Djirdeh

react-snap ist eine Drittanbieterbibliothek, mit der Seiten auf Ihrer Website in statische HTML-Dateien vorgerendert werden. Dadurch können die First Paint-Zeiten in Ihrer Anwendung verbessert werden.

Hier sehen Sie einen Vergleich derselben Anwendung mit und ohne Vorrendering, die auf einem simulierten Mobilgerät mit 3G-Verbindung geladen wird:

Ein direkter Vergleich des Ladens. Die Version mit Vorrendering wird 4,2 Sekunden schneller geladen.

Welchen Nutzen bieten sie?

Das Hauptleistungsproblem bei großen Single-Page-Anwendungen besteht darin, dass der Nutzer warten muss, bis die JavaScript-Bundles, aus denen die Website besteht, vollständig heruntergeladen wurden, bevor er tatsächliche Inhalte sehen kann. Je größer die Pakete sind, desto länger müssen die Nutzer warten.

Viele Entwickler beheben dieses Problem, indem sie die Anwendung auf dem Server rendern, anstatt sie nur im Browser zu starten. Bei jeder Seiten-/Routenübergang wird das gesamte HTML auf dem Server generiert und an den Browser gesendet. Dadurch wird die Zeit bis zum ersten Rendern verkürzt, aber die Zeit bis zum ersten Byte verlängert.

Vorrendern ist eine separate Technik, die weniger komplex als das Serverrendering ist, aber auch eine Möglichkeit bietet, die Zeit bis zum ersten Rendern in Ihrer Anwendung zu verkürzen. Ein Headless-Browser oder ein Browser ohne Benutzeroberfläche wird verwendet, um während der Build-Zeit statische HTML-Dateien für jede Route zu generieren. Diese Dateien können dann zusammen mit den JavaScript-Bundles ausgeliefert werden, die für die Anwendung erforderlich sind.

react-snap

react-snap verwendet Puppeteer, um vorgerenderte HTML-Dateien verschiedener Routen in Ihrer Anwendung zu erstellen. Installieren Sie es zuerst als Entwicklungsabhängigkeit:

npm install --save-dev react-snap

Fügen Sie dann ein postbuild-Skript in Ihre package.json ein:

"scripts": {
  //...
  "postbuild": "react-snap"
}

Dadurch wird der Befehl react-snap automatisch jedes Mal ausgeführt, wenn ein neuer Build der Anwendungen erstellt wird (npm build).

Als Letztes müssen Sie ändern, wie die Anwendung gestartet wird. Ändern Sie die Datei src/index.js so:

import React from 'react';
import ReactDOM from 'react-dom';
import