Rendering

Rendering wandelt den von Ihnen geschriebenen Code in Benutzeroberflächen um. React und Next.js ermöglichen die Erstellung hybrider Webanwendungen, bei denen Teile Ihres Codes auf dem Server oder Client gerendert werden können. Dieser Abschnitt hilft Ihnen, die Unterschiede zwischen diesen Rendering-Umgebungen, Strategien und Laufzeitumgebungen zu verstehen.

Grundlagen

Zum Einstieg ist es hilfreich, drei grundlegende Webkonzepte zu kennen:

• Die Umgebungen, in denen Ihr Anwendungscode ausgeführt werden kann: Server und Client.
• Den Anfrage-Antwort-Lebenszyklus, der initiiert wird, wenn ein Benutzer Ihre Anwendung besucht oder mit ihr interagiert.
• Die Netzwerkgrenze, die Server- und Client-Code trennt.

Rendering-Umgebungen

Es gibt zwei Umgebungen, in denen Webanwendungen gerendert werden können: Client und Server.

• Der Client bezieht sich auf den Browser auf dem Gerät eines Benutzers, der eine Anfrage an einen Server für Ihren Anwendungscode sendet. Anschließend wandelt er die Antwort des Servers in eine Benutzeroberfläche um.
• Der Server bezieht sich auf den Computer in einem Rechenzentrum, der Ihren Anwendungscode speichert, Anfragen von einem Client empfängt und eine entsprechende Antwort zurücksendet.

Historisch gesehen mussten Entwickler unterschiedliche Sprachen (z.B. JavaScript, PHP) und Frameworks verwenden, wenn sie Code für Server und Client schrieben. Mit React können Entwickler die gleiche Sprache (JavaScript) und das gleiche Framework (z.B. Next.js oder ein Framework Ihrer Wahl) verwenden. Diese Flexibilität ermöglicht es Ihnen, nahtlos Code für beide Umgebungen zu schreiben, ohne den Kontext wechseln zu müssen.

Jede Umgebung hat jedoch ihre eigenen Fähigkeiten und Einschränkungen. Daher ist der Code, den Sie für Server und Client schreiben, nicht immer identisch. Bestimmte Operationen (z.B. Datenabruf oder Verwaltung des Benutzerzustands) sind besser für die eine oder andere Umgebung geeignet.

Das Verständnis dieser Unterschiede ist entscheidend für die effektive Nutzung von React und Next.js. Wir werden die Unterschiede und Anwendungsfälle auf den Seiten Server und Client Komponenten ausführlicher behandeln. Lassen Sie uns zunächst unsere Grundlagen weiter ausbauen.

Anfrage-Antwort-Lebenszyklus

Grob gesagt folgen alle Websites dem gleichen Anfrage-Antwort-Lebenszyklus:

1. Benutzeraktion: Der Benutzer interagiert mit einer Webanwendung. Dies könnte ein Klick auf einen Link, das Absenden eines Formulars oder die direkte Eingabe einer URL in die Adressleiste des Browsers sein.
2. HTTP-Anfrage: Der Client sendet eine HTTP-Anfrage an den Server, die die notwendigen Informationen darüber enthält, welche Ressourcen angefordert werden, welche Methode verwendet wird (z.B. GET, POST) und gegebenenfalls zusätzliche Daten.
3. Server: Der Server verarbeitet die Anfrage und antwortet mit den entsprechenden Ressourcen. Dieser Prozess kann einige Schritte wie Routing, Datenabruf usw. umfassen.
4. HTTP-Antwort: Nach der Verarbeitung der Anfrage sendet der Server eine HTTP-Antwort an den Client zurück. Diese Antwort enthält einen Statuscode (der dem Client mitteilt, ob die Anfrage erfolgreich war oder nicht) und die angeforderten Ressourcen (z.B. HTML, CSS, JavaScript, statische Assets usw.).
5. Client: Der Client analysiert die Ressourcen, um die Benutzeroberfläche zu rendern.
6. Benutzeraktion: Sobald die Benutzeroberfläche gerendert ist, kann der Benutzer mit ihr interagieren, und der gesamte Prozess beginnt von neuem.

Ein wesentlicher Teil des Aufbaus einer hybriden Webanwendung besteht darin, zu entscheiden, wie die Arbeit im Lebenszyklus aufgeteilt wird und wo die Netzwerkgrenze platziert werden soll.

Netzwerkgrenze

In der Webentwicklung ist die Netzwerkgrenze eine konzeptionelle Linie, die die verschiedenen Umgebungen trennt. Zum Beispiel Client und Server oder Server und Datenspeicher.

In React können Sie wählen, wo Sie die Client-Server-Netzwerkgrenze platzieren, wo es am sinnvollsten ist.

Im Hintergrund wird die Arbeit in zwei Teile aufgeteilt: den Client-Modulgraphen und den Server-Modulgraphen. Der Server-Modulgraph enthält alle Komponenten, die auf dem Server gerendert werden, und der Client-Modulgraph enthält alle Komponenten, die auf dem Client gerendert werden.

Es kann hilfreich sein, sich Modulgraphen als visuelle Darstellung vorzustellen, wie Dateien in Ihrer Anwendung voneinander abhängen.

Sie können die React-Konvention "use client" verwenden, um die Grenze zu definieren. Es gibt auch eine "use server"-Konvention, die React anweist, einige Berechnungen auf dem Server durchzuführen.

Hybride Anwendungen erstellen

Bei der Arbeit in diesen Umgebungen ist es hilfreich, sich den Fluss des Codes in Ihrer Anwendung als unidirektional vorzustellen. Mit anderen Worten: Während einer Antwort fließt Ihr Anwendungscode in eine Richtung: vom Server zum Client.

Wenn Sie vom Client aus auf den Server zugreifen müssen, senden Sie eine neue Anfrage an den Server, anstatt dieselbe Anfrage wiederzuverwenden. Dies erleichtert das Verständnis, wo Sie Ihre Komponenten rendern und wo Sie die Netzwerkgrenze platzieren sollen.

In der Praxis ermutigt dieses Modell Entwickler, zunächst darüber nachzudenken, was sie auf dem Server ausführen möchten, bevor sie das Ergebnis an den Client senden und die Anwendung interaktiv machen.

Dieses Konzept wird klarer, wenn wir uns ansehen, wie Sie Client- und Serverkomponenten im gleichen Komponentenbaum verschachteln können.