Server Side Rendering mit React

Das JavaScript Full-Stack Bootcamp 2021 ist JETZT OFFEN FÜR ANMELDUNGEN!

Server Side Rendering, auch SSR genannt, ist die Fähigkeit einer JavaScript-Anwendung, auf dem Server und nicht im Browser zu rendern.

Warum sollten wir das überhaupt tun wollen?

• Es ermöglicht eine schnellere Ladezeit der ersten Seite, was der Schlüssel zu einer guten Benutzererfahrung ist
• Es ist wichtig für die Suchmaschinenoptimierung: Suchmaschinen können Anwendungen, die ausschließlich clientseitig gerendert werden, (noch?) nicht effizient und korrekt indizieren. Trotz der jüngsten Verbesserungen der Indexierung bei Google gibt es auch andere Suchmaschinen, und Google ist in jedem Fall nicht perfekt. Außerdem bevorzugt Google Websites mit schnellen Ladezeiten, und dass sie clientseitig geladen werden müssen, ist nicht gut für die Geschwindigkeit
• Es ist großartig, wenn Leute eine Seite Ihrer Website in sozialen Medien teilen, da sie leicht die Metadaten sammeln können, die benötigt werden, um den Link schön zu teilen (Bilder, Titel, Beschreibung…)

Ohne Server Side Rendering ist alles, was Ihr Server ausliefert, eine HTML-Seite ohne Textkörper, nur einige Skript-Tags, die dann vom Browser verwendet werden, um die Anwendung zu rendern.

Clientseitig gerenderte Anwendungen sind großartig bei jeder nachfolgenden Benutzerinteraktion nach dem ersten Laden der Seite. Server Side Rendering ermöglicht es uns, den Sweet Spot in der Mitte zwischen Client-gerenderten Anwendungen und Backend-gerenderten Anwendungen zu finden: die Seite wird serverseitig generiert, aber alle Interaktionen mit der Seite, sobald sie geladen wurde, werden clientseitig abgewickelt.

Allerdings hat Server Side Rendering auch seine Nachteile:

• Ein einfacher SSR-Konzeptnachweis ist zwar einfach, aber die Komplexität von SSR kann mit der Komplexität Ihrer Anwendung wachsen
• Das serverseitige Rendern einer großen Anwendung kann ziemlich ressourcenintensiv sein und bei hoher Last sogar langsamer als das clientseitige Rendern, da es nur einen einzigen Engpass gibt

Ein sehr einfaches Beispiel dafür, was man braucht, um eine React-Anwendung serverseitig zu rendern

SSR-Setups können sehr, sehr komplex werden und die meisten Tutorials werden Redux, React Router und viele andere Konzepte von Anfang an einbinden.

Um zu verstehen, wie SSR funktioniert, fangen wir mit den Grundlagen an, um ein Proof of Concept zu implementieren.

Fühlen Sie sich frei, diesen Abschnitt zu überspringen, wenn Sie nur einen Blick in die Bibliotheken werfen wollen, die SSR zur Verfügung stellen, und sich nicht mit der Grundlagenarbeit beschäftigen wollen

Um grundlegendes SSR zu implementieren, werden wir Express verwenden.

Wenn Sie neu bei Express sind oder etwas Nachholbedarf haben, lesen Sie mein kostenloses Express-Handbuch hier: https://flaviocopes.com/page/ebooks/.

Warnung: Die Komplexität von SSR kann mit der Komplexität Ihrer Anwendung wachsen. Dies ist das absolute Minimum, um eine einfache React-Anwendung zu rendern. Für komplexere Anforderungen müssen Sie möglicherweise etwas mehr Arbeit leisten oder sich die SSR-Bibliotheken für React ansehen.

Ich nehme an, dass Sie eine React-App mit create-react-app gestartet haben. Wenn du es gerade versuchst, installiere jetzt eine mit npx create-react-app ssr.

Geh mit dem Terminal zum Hauptordner der App und führe aus:

npm install express

Du hast eine Reihe von Ordnern in deinem App-Verzeichnis. Erstellen Sie einen neuen Ordner mit dem Namen server, gehen Sie hinein und erstellen Sie eine Datei mit dem Namen server.js.

Nach den create-react-app-Konventionen befindet sich die App in der Datei src/App.js. Wir laden diese Komponente und wandeln sie mit ReactDOMServer.renderToString() in einen String um, der von react-dom.

Sie holen sich den Inhalt der ./build/index.html-Datei und ersetzen den <div></div>-Platzhalter, der das Tag ist, an dem die Anwendung standardmäßig hängt, mit `<div>${ReactDOMServer.renderToString(<App />)}</div>.

Alle Inhalte im build-Ordner werden statisch von Express bereitgestellt, wie sie sind.

import path from 'path'import fs from 'fs'import express from 'express'import React from 'react'import ReactDOMServer from 'react-dom/server'import App from '../src/App'const PORT = 8080const app = express()const router = express.Router()const serverRenderer = (req, res, next) => { fs.readFile(path.resolve('./build/index.html'), 'utf8', (err, data) => { if (err) { console.error(err) return res.status(500).send('An error occurred') } return res.send( data.replace( '<div></div>', `<div>${ReactDOMServer.renderToString(<App />)}</div>` ) ) })}router.use('^/$', serverRenderer)router.use( express.static(path.resolve(__dirname, '..', 'build'), { maxAge: '30d' }))// tell the app to use the above rulesapp.use(router)// app.use(express.static('./build'))app.listen(PORT, () => { console.log(`SSR running on port ${PORT}`)})

Nun, in der Client-Anwendung, in Ihrem src/index.js, anstatt ReactDOM.render() aufzurufen:

ReactDOM.render(<App />, document.getElementById('root'))

Aufruf von ReactDOM.hydrate(), was dasselbe ist, aber zusätzlich die Möglichkeit hat, Event-Listener an bestehendes Markup anzuhängen, sobald React lädt:

ReactDOM.hydrate(<App />, document.getElementById('root'))

Der gesamte Node.js-Code muss von Babel transpiliert werden, da der serverseitige Node.js-Code weder JSX noch ES-Module (die wir für die include-Anweisungen verwenden) kennt.

Installieren Sie diese 4 Pakete:

npm install @babel/register @babel/preset-env @babel/preset-react ignore-styles

ignore-styles ist ein Babel-Dienstprogramm, das es anweist, CSS-Dateien zu ignorieren, die mit der import-Syntax importiert wurden.

Lassen Sie uns einen Einstiegspunkt in server/index.js erstellen:

require('ignore-styles')require('@babel/register')({ ignore: , presets: })require('./server')

Erstellen Sie die React-Anwendung, so dass der Ordner build/ befüllt wird:

npm run build

Und führen wir dies aus:

node server/index.js

Ich sagte, dass dies ein einfacher Ansatz ist, und das ist es auch:

• Es behandelt das Rendern von Bildern nicht korrekt, wenn Importe verwendet werden, die Webpack benötigen, um zu funktionieren (und was den Prozess sehr verkompliziert)
• Es behandelt die Metadaten des Seitenkopfes nicht, die für SEO und Social-Sharing-Zwecke (unter anderem) unerlässlich sind)

Das ist zwar ein gutes Beispiel für die Verwendung von ReactDOMServer.renderToString() und ReactDOM.hydrate, um dieses grundlegende serverseitige Rendering zu erhalten, aber es ist nicht genug für den realen Einsatz.

Server Side Rendering mit Bibliotheken

SSR ist schwer richtig zu machen, und React hat keinen de-facto Weg, es zu implementieren.

Es ist immer noch sehr fraglich, ob es die Mühe, die Komplikationen und den Overhead wert ist, um die Vorteile zu erhalten, anstatt eine andere Technologie zu verwenden, um diese Seiten zu bedienen. In dieser Diskussion auf Reddit gibt es viele Meinungen dazu.

Wenn Server Side Rendering eine wichtige Angelegenheit ist, schlage ich vor, sich auf vorgefertigte Bibliotheken und Tools zu verlassen, die dieses Ziel von Anfang an im Auge hatten.

Insbesondere empfehle ich Next.js und Gatsby.

Das JavaScript Full-Stack Bootcamp 2021 IST JETZT OFFEN FÜR ANMELDUNGEN BIS NÄCHSTEN DIENSTAG! Verpassen Sie diese Gelegenheit nicht, melden Sie sich HEUTE an!

Weitere React-Tutorials:

• VS Code-Setup für die React-Entwicklung
• React-Konzept: Unveränderlichkeit
• Wie man mehrere Elemente in JSX zurückgibt
• React-Portale
• Wie man HTML in React rendert
• Die Roadmap zum Erlernen von React
• Sollte man jQuery oder React verwenden?
• Wie man den useRef React Hook verwendet
• React Router, wie man Daten von einer dynamischen Route erhält