//

Tutorial: Serverseitiges Rendering mit React – Teil 1: Einführung

6.12.2017 | 2 Minuten Lesezeit

Wie ich in dem Artikel SEO + SPA = serverseitiges Rendering? aufgezeigt habe, ist das serverseitige Rendering (SSR) nach wie vor die sicherste Möglichkeit, um SEO-kritische Inhalte zu präsentieren.

In diesem Tutorial zeige ich Schritt für Schritt, wie man eine clientseitige React-App auf eine serverseitig gerenderte App umstellt.

Das Tutorial habe ich in drei Teile aufgeteilt:

  1. Einführung
  2. React Router und React Helmet
  3. Redux Store

In diesem Teil schauen wir uns an, was SSR überhaupt ist und wie es prinzipiell funktioniert. Dabei steigen wir auch schon in die ersten Code-Beispiele ein und erstellen eine simple Version der serverseitig gerenderten App.
Im zweiten Teil kümmern wir uns um React Router und um React Helmet, damit wir für jede der angefragten Seiten immer das richtige statische HTML vom Server bekommen.
Im dritten Teil geht es dann um den State unserer Applikation. Wir tauchen tiefer in Redux und die Möglichkeiten ein, wie wir sowohl auf dem Server als auch auf dem Client den globalen State nutzen, um unsere Komponenten mit dynamischen Inhalten zu rendern.

1. Einführung

SSR bringt einiges an zusätzlichen Aufwand mit sich und hat auch ein paar Nachteile, die man bedenken sollte. Sowohl React als auch Angular bringen nativ die Möglichkeit mit, den Inhalt auf dem Server zu rendern. Das ist schonmal eine gute Sache, denn man muss nicht unbedingt kostenpflichtige externe Dienste wie prerender.io nutzen. Jedoch gibt es u.a. folgende Probleme:

  • SSR passiert immer dann, wenn die Seite angefragt wird. Es müssen also zunächst alle Inhalte auf dem Server zusammengesetzt werden bevor sie zum Browser gesendet werden. Gerade wenn es sich um Inhalte handelt, die man erst per API Request von externen Services holt, kann das eine gewisse Zeit in Anspruch nehmen, was die Wartezeit für den Nutzer erhöht. Hier macht es also Sinn, sich Gedanken über einen Caching Mechanismus zu machen. (Varnish, CDN)
  • Auf dem Server gibt es kein window-Objekt in JavaScript. Sollte dieses irgendwo im Code im Einsatz sein und nicht vor der Benutzung abgefragt werden, kommt es beim Rendern zu Fehlern.
  • Der Aufwand für das SSR hängt davon ab, wie viele Features wir aus dem React Ökosystem nutzen. Meistens kommen Module wie React Router, Redux, React Helmet usw. zum Einsatz. Für all die genannten müssen wir uns überlegen, wie der Server diese handhaben kann, denn ohne unser Zutun funktionieren diese Module nicht wie auf dem Client.

Für diejenigen, die noch nicht so viel Erfahrung mit SSR haben, zeigt der Infokasten „Wie funktioniert SSR in React?“ kurz zusammengefasst, was die grundlegende Funktionsweise des SSR ist.

Info: Wie funktioniert SSR in React?

Die Frage, die häufig gestellt wird, wenn es um das serverseitiges Rendering geht, ist, ob dann die ganze Dynamik der Single Page App (SPA) verloren geht, wenn man eine statische HTML Seite zum Browser schickt. Ich kann euch beruhigen, die Funktionalität wird in keinster Weise beeinflusst. Der Ablauf beim SSR ist zweistufig:

  1. Die statische HTML-Seite wird auf dem Server generiert und zum Client geschickt
  2. Im HTML ist ein

Beitrag teilen

Gefällt mir

0

//

Weitere Artikel in diesem Themenbereich

Entdecke spannende weiterführende Themen und lass dich von der codecentric Welt inspirieren.

//

Gemeinsam bessere Projekte umsetzen

Wir helfen Deinem Unternehmen

Du stehst vor einer großen IT-Herausforderung? Wir sorgen für eine maßgeschneiderte Unterstützung. Informiere dich jetzt.

Hilf uns, noch besser zu werden.

Wir sind immer auf der Suche nach neuen Talenten. Auch für dich ist die passende Stelle dabei.