Routen vorab rendern – mit Reaktions-Snap

Sie verwenden kein serverseitiges Rendering, möchten aber die Leistung Ihrer React-Website verbessern? Versuchen Sie es mit Pre-Rendering!

Houssein Djirdeh

react-snap ist ein Drittanbieter Bibliothek, die die Seiten Ihrer Website vorab in statische HTML-Dateien rendert. Dies kann verbessern Erstmalerei Mal in Ihrer Anwendung angeben.

Hier ein Vergleich der gleichen Anwendung mit und ohne Pre-Rendering über eine simulierte 3G-Verbindung und auf einem Mobilgerät geladen:

<ph type="x-smartling-placeholder">
</ph> Ein Vergleich der Ladeleistung direkt nebeneinander. Die Version, für die Pre-Rendering verwendet wird, lädt 4,2 Sekunden schneller.

Welchen Nutzen bieten sie?

Das größte Leistungsproblem bei großen Single-Page-Anwendungen besteht darin, dass der Der Nutzer muss warten, bis die JavaScript-Bundles für die Website fertig sind. bevor sie echte Inhalte sehen. Je größer die Sets, desto länger warten müssen.

Um dieses Problem zu lösen, rendern viele Entwickler die Anwendung anstatt sie nur im Browser zu starten. Mit jedem wird der vollständige HTML-Code auf dem Server generiert und an folgende Adresse gesendet: dem Browser, was die First Paint-Zeit verkürzt, aber zu Lasten einer langsameren Time to First Byte.

Das Pre-Rendering ist ein separates Verfahren, das weniger komplex ist als das sondern auch die First Paint-Zeiten in Ihrem . Es wird ein monitorloser Browser oder ein Browser ohne Benutzeroberfläche verwendet , um statische HTML-Dateien für jede Route während der Build-Zeit zu generieren. Diese Dateien kann dann mit den JavaScript-Bundles ausgeliefert werden, die für die .

Reaktion/Snap

react-snap verwendet Puppeteer, um Vorab gerenderte HTML-Dateien verschiedener Routen in Ihrer Anwendung erstellen. Bis Beginnen Sie, installieren Sie es als Entwicklungsabhängigkeit:

npm install --save-dev react-snap

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

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

Dadurch wird der Befehl react-snap jedes Mal automatisch ausgeführt, wenn ein neuer Build von der eingereichten Anwendungen (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 './index.css';
import App from './App';

ReactDOM.render(<App />, document.getElementById('root'));
const rootElement = document.getElementById("root");

if (rootElement.hasChildNodes()) {
  ReactDOM.hydrate(<App />, rootElement);
} else {
  ReactDOM.render(<App />, rootElement);
}

Anstatt nur ReactDOM.render zum Rendern des React-Stammelements zu verwenden direkt in das DOM einfügt, wird überprüft, ob bereits untergeordnete Knoten vorhanden sind. um zu ermitteln, ob HTML-Inhalte vorab gerendert (oder auf der Server). In diesem Fall wird stattdessen ReactDOM.hydrate verwendet, um das Ereignis anzuhängen. Listener für den bereits erstellten HTML-Code, anstatt ihn neu zu erstellen.

Beim Erstellen der Anwendung werden nun statische HTML-Dateien als Nutzlasten für die gecrawlt wird. Sie können sich die HTML-Nutzlast ansehen, indem Sie auf die URL der HTML-Anfrage und dann auf die Vorschau in den Chrome-Entwicklertools.

Ein Vorher-Nachher-Vergleich. In der Nachbearbeitung ist zu sehen, dass der Inhalt gerendert wurde.

Flash mit Inhalten ohne Design

Statischer HTML-Code wird jetzt fast sofort gerendert, bleibt aber weiterhin standardmäßig nicht gestaltet, was dazu führen kann, dass Inhalt“ (FOUC) Dies fällt besonders auf, wenn Sie ein CSS-in-JS- um Selektoren zu generieren, da das JavaScript-Bundle ausgeführt werden, bevor Stile angewendet werden können.

Um dies zu verhindern, das wichtige CSS oder die Mindestmenge an CSS, die die für das Rendering der ersten Seite erforderlich sind, können direkt in den <head> eingefügt werden. des HTML-Dokuments. react-snap verwendet eine andere Drittanbieterbibliothek unter dem Abzugshaube, minimalcss, zum Ausziehen wichtigen CSS für verschiedene Routen. Sie können diese Funktion aktivieren, indem Sie den Parameter Folgendes in Ihrer package.json-Datei:

"reactSnap": {
  "inlineCss": true
}

Wenn Sie einen Blick auf die Antwortvorschau in den Chrome-Entwicklertools werfen, sehen Sie nun die Seite mit dem benutzerdefinierten Stil mit wichtigen CSS-Inline-Elemente.

Ein Vorher-Nachher-Vergleich. In der Nachher-Aufnahme ist zu sehen, dass der Inhalt gerendert wurde und aufgrund von Inline-kritischen CSS-Stilen gestaltet wurde.

Fazit

Wenn Sie in Ihrer Anwendung keine serverseitigen Renderingrouten nutzen, verwenden Sie react-snap, um statischen HTML-Code für die Nutzer vorab zu rendern.

  1. Installieren Sie es als Entwicklungsabhängigkeit und beginnen Sie nur mit der Standardeinstellung Einstellungen.
  2. Verwende die experimentelle Option inlineCss, um wichtigen CSS-Code inline einzubetten, wenn sie funktioniert. für Ihre Website.
  3. Wenn Sie die Codeaufteilung auf Komponentenebene innerhalb von Routen verwenden, Achten Sie darauf, für Ihre Nutzer keinen Ladezustand vorab zu rendern. Die react-snap – README-Datei ausführlicher behandelt.