Serverseitiges Rendern mit React

Veröffentlicht: 2021-05-27

Ein bisschen über Reagieren

React ist eine Open-Source-Frontend-JavaScript-Bibliothek, die von der Facebook Developer Community erstellt und gepflegt wird. Es wird verwendet, um Benutzeroberflächen oder UI-Komponenten zu erstellen.

Diese Definition ist jedoch für Anfänger möglicherweise nicht vollständig verständlich. Wir haben den perfekten Blogbeitrag, der Sie durch eine kurze Erklärung von React bis hin zu einer sehr detaillierten technischen Beschreibung führt, die Sie hier finden können.

Die Reise einer Webseite | Vom Server zu Ihrem Browser

Um zu verstehen, was Server Side Rendering ist, ist es zunächst wichtig, sich einen Überblick darüber zu verschaffen, wie eine Webseite auf Ihrem Bildschirm aussieht, was durch das folgende Diagramm verdeutlicht wird:

ssr-with-react-webpage-server-to-browser
  1. Immer wenn Sie die URL einer Website eingeben oder auf einen Link zu der Website klicken, sendet Ihr Browser eine Anfrage nach einigen Dateien an den entsprechenden Server, der durch die URL identifiziert wird.
  2. Der Server sendet einige Dateien, wie unter anderem die HTML- und JavaScript-Dateien, an Ihren Browser.
  3. Ihr Browser lädt diese Dateien herunter und „rendern“ oder verarbeitet sie, und Sie können die angeforderte Webseite sehen und mit ihr interagieren.

Dies ist eine sehr starke Vereinfachung der Reise einer Webseite, aber eine gute Einleitung, um die verschiedenen Teilschritte und verschiedenen Wege (einschließlich serverseitiges Rendering) zu erklären, um diese Aufgabe zu erfüllen.

Reise einer „normalen“ clientseitigen Rendering-Webseite

Wenn wir tiefer in den im vorherigen Abschnitt erwähnten Prozess eintauchen, haben wir eine Technik namens Client Side Rendering oder CSR, die seit langem verwendet wird, um eine Website auf den Bildschirmen der Benutzer anzuzeigen. Dies wird im folgenden Diagramm erläutert:

ssr-with-react-csr-webpage-rendering
  1. Wenn Sie die URL einer Website eingeben oder auf einen Link zu der Website klicken, sendet Ihr Browser eine Anfrage nach einigen Dateien an den entsprechenden Server, der durch die URL identifiziert wird.
  2. Der Server sendet die HTML-Datei, die die Verweise auf andere Assets wie Bilddateien, CSS-Dateien und JavaScript-Dateien enthält.
  3. Der Browser sendet erneut eine Anfrage an den Server und lädt alle Dateien herunter, einschließlich der CSS- und JavaScript-Dateien, auf die in der HTML-Datei verwiesen wird.
    1. Dies kann dazu beitragen, die Ladezeit einer Website zu erhöhen, wenn die Benutzer eine schlechte Verbindung haben und die JavaScript-Datei groß ist.
  4. Sobald diese Dateien vom Browser heruntergeladen wurden, führt der Browser das Framework oder die Bibliothek (z. B. React) aus und parst die JavaScript-Dateien, die dafür verantwortlich sind, die Webseite interaktiv zu machen.
    1. Aus Sicht der Geschwindigkeitsoptimierung hängt dieser Punkt vom Client-Computer ab, und wenn der Client eine Hardware mit geringer Leistung ist, kann dies viel Zeit in Anspruch nehmen.
    2. Der Benutzer sieht immer noch den Ladebildschirm, wenn diese Schritte durchlaufen werden
  5. Die Webseite wird schließlich vollständig geladen und der Benutzer kann die Webseite sehen und mit ihr interagieren.

Wie aus den oben genannten Schritten hervorgeht, kann der Benutzer aus Sicht des Benutzers die Website erst im letzten Schritt sehen und mit ihr interagieren, nachdem alle erforderlichen Dateien heruntergeladen und vom Client-Computer gerendert wurden.

Dies kann sehr viel Zeit in Anspruch nehmen, da es von der Leistung des Clientcomputers beim Ausführen des Frameworks und beim Analysieren der JavaScript-Dateien abhängt.

Die Reise der serverseitigen Rendering-Webseite

Um es in einer einzigen Zeile zu erklären, Server Side Rendering oder SSR ist der Prozess, bei dem eine clientseitige JavaScript-Framework-Website genommen und auf dem Server statt auf dem Client in statisches HTML und CSS gerendert wird, wie es bei CSR der Fall war.

Unten erwähnt ist eine bildliche Darstellung der Reise, die eine Webseite mit Server Side Rendering mit React unternimmt:

ssr-mit-reagieren-ssr-webpage-rendering-mit-reagieren
  1. Wenn Sie die URL einer Website eingeben oder auf einen Link zu der Website klicken, sendet Ihr Browser eine Anfrage nach einigen Dateien an den entsprechenden Server, der durch die URL identifiziert wird.
  2. Anstatt nur Vanilla-HTML-Dateien wie in CSR zu senden, rendert der Server die App mithilfe der aus „ react-dom/server “ importierten Funktion „renderToString“ in einen String
    1. Diese wird dann in die index.html-Datei eingefügt und an den Browser gesendet.
    2. Hier liegt funktional gesehen der Kern von SSR, da hier der Server die Seite rendert und nicht der Client-Rechner.
  3. Der Browser rendert diese HTML-Datei, was dazu führt, dass die Ansicht im Browser ausgefüllt wird.
    1. Dies ist jedoch noch nicht interaktiv, sondern der Benutzer kann die endgültige Ansicht der Webseite sehen.
  4. Der Browser sendet erneut eine Anfrage an den Server und lädt alle Dateien herunter, auf die in der HTML-Datei verwiesen wird, einschließlich JavaScript-Dateien.
  5. Sobald alle Skripte heruntergeladen sind, wird die React-Komponente erneut auf dem Client gerendert. Diesmal wird jedoch die vorhandene Ansicht hydratisiert, anstatt sie zu überschreiben.
    1. Das „Hydratisieren“ einer Ansicht bedeutet, dass alle Event-Handler an die gerenderten DOM-Elemente (Document Object Model) angehängt werden, die gerenderten DOM-Elemente jedoch intakt bleiben. Auf diese Weise bleibt der Zustand der DOM-Elemente erhalten und es findet kein Zurücksetzen der Ansicht statt.
  6. Die Webseite ist schließlich vollständig geladen und der Benutzer kann nun mit der Seite interagieren, die er aus Schritt 3 selbst sehen konnte.

Daher ist eine der größten visuellen Änderungen aus der Sicht des Benutzers, dass die Webseite ziemlich schnell „sichtbar“ wird, da das Rendern von HTML aus Sicht des Browsers nicht so ressourcenintensiv ist.

Dadurch wird die Seite nicht automatisch schneller geladen als eine Nicht-SSR-App, aber es gibt den Benutzern die Ansicht der Webseite, während die JavaScript-Dateien im Hintergrund heruntergeladen und analysiert werden, wonach die Webseite interaktiv wird. Dies bedeutet, dass die TTI, dh Time To Interactive (das ist die Zeit, die es dauert, bis die Webseite vollständig interaktiv ist, wenn der Benutzer die Webseite anfordert) etwas länger ist als die Zeit, die es dauert, bis die Webseite sichtbar ist im Browser.

In einem SSR-Szenario müssen Ihr HTML und CSS für eine schnellere erste Renderzeit also für die Benutzer aussagekräftig sein, und JavaScript kann die Verbesserung für HTML und CSS sein, da das Laden verzögert wird.

Ein häufiges Missverständnis über die Funktionsweise von SSR mit React ist, dass der Server nach jeder Änderung, z. B. wenn ein Benutzer neue Daten anfordert, alle Schritte erneut abschließt und die HTML-Datei mit der neuen Benutzeroberfläche an den Browser sendet, aber das ist nicht der Fall . Es wird nur eine teilweise Aktualisierung der Seite durchgeführt. Obwohl das Rendern vom Server durchgeführt wird, wird die fertige Ausgabe in das DOM eingefügt, indem sie, wie zuvor erläutert, „hydriert“ wird.

ssr-mit-reagieren-für-nachteile-von-ssr

Serverseitiges Rendern | Wann und wann nicht zu verwenden

  • Wenn Sie starkes SEO benötigen, entscheiden Sie sich für SSR, da es für Suchmaschinen einfacher zu crawlen ist.
  • Für Websites, die inhaltsorientiert und nicht interaktionsorientiert sind, wie z. B. Blogs, Nachrichtenwebsites, statische Websites und textlastige Websites, kann SSR ein Segen sein, da es den Kern Ihrer Website lädt, dh blitzschnelle Inhalte.
  • Es erfordert Zeit und Mühe auf der Serverseite, die Dateien zu rendern und zu generieren, die an den Browser gesendet werden sollen. Wenn Sie also über ein niedriges Server- und Betriebsbudget verfügen, sollten Sie SSR besser nicht implementieren, da viele Anfragen an Ihren Server gesendet werden.
    • Bei Anbietern wie Firebase können wir jedoch Inhalte mit Cloud-Funktionen dynamisch generieren und der Server kann sie im CDN-Cache speichern
    • Dies würde bewirken, dass beim nächsten Mal, wenn der Benutzer anfordert, die Generierung der Dateien nicht erneut vom Server durchgeführt wird. Vielmehr wird es nur von einem lokalen CDN-Edge bereitgestellt, wodurch die Ladezeiten aus Benutzersicht verbessert werden und gleichzeitig weniger Serverressourcen verwendet werden.

Wie gut ist React für SSR?

React ist eine ausgezeichnete Wahl, um SSR zu implementieren, da es das Konzept eines virtuellen DOM (Document Object Model) beinhaltet.

Dies ermöglicht Entwicklern, eine virtuelle Version der React-App zu erstellen und sie auf dem Server selbst zu haben.

Dies macht es einfacher, es mit der zuvor besprochenen renderToString-Funktion in HTML zu rendern, es an den Browser zu senden, damit der Browser es ziemlich schnell rendern und eine virtuelle Version auf dem Client-Computer erstellen kann.

Angesichts der Tatsache, dass diese virtuelle Version mit HTML übereinstimmt, das wir vom Server gesendet haben, wird React sie nicht erneut rendern, wodurch die Time To Interactive (TTI) verringert wird, was zu einer „schnelleren“ Ladezeit der Webseite führt.

SSR, den ganzen Tag, jeden Tag!

Wir würden uns wünschen, es gäbe eine Einheitslösung für alles, aber das ist bei weitem nicht der Fall, insbesondere bei neuen Technologien. Obwohl SSR unzählige Vorteile bietet, gibt es, wie bereits erwähnt, einige Fälle, für die SSR möglicherweise keine gute Wahl ist. hochgradig interaktive Websites, die an der Spitze stehen.

Hier kommen Creole Studios ins Spiel. Wir haben eine Reihe von Technologieexperten, die immer auf dem Laufenden sind, was fast jede neue Technologie betrifft, die in der Techverse auftaucht. Wir werden Ihre geschäftlichen Anforderungen verstehen und Ihnen maßgeschneiderte Lösungen anbieten, sei es eine SSR- oder CSR-App, und seien Sie versichert, dass Sie sich um nichts kümmern müssen, während wir die schwere Arbeit für Sie erledigen. Kontaktieren Sie uns und bringen Sie Ihre Ideen aus dem Kopf in eine App!