Rendering
Rendering wandelt den von Ihnen geschriebenen Code in Benutzeroberflächen um. React und Next.js ermöglichen es Ihnen, hybride Webanwendungen zu erstellen, bei denen Teile Ihres Codes auf dem Server oder dem Client gerendert werden können. Dieser Abschnitt wird Ihnen helfen, die Unterschiede zwischen diesen Rendering-Umgebungen, -Strategien und -Laufzeiten zu verstehen.
Grundlagen
Zunächst ist es hilfreich, drei grundlegende Webkonzepte zu kennen:
- Die Umgebungen, in denen Ihr Anwendungscode ausgeführt werden kann: der Server und der Client.
- Der 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: den Client und den 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. Er wandelt dann 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 mussten Entwickler unterschiedliche Sprachen (z.B. JavaScript, PHP) und Frameworks verwenden, wenn sie Code für den Server und den Client schrieben. Mit React können Entwickler die gleiche Sprache (JavaScript) und das gleiche Framework (z.B. Next.js oder Ihr bevorzugtes Framework) verwenden. Diese Flexibilität ermöglicht es Ihnen, nahtlos Code für beide Umgebungen zu schreiben, ohne den Kontext wechseln zu müssen.
Allerdings hat jede Umgebung ihre eigenen Fähigkeiten und Einschränkungen. Daher ist der Code, den Sie für den Server und den Client schreiben, nicht immer identisch. Es gibt bestimmte Operationen (z.B. Datenabruf oder Verwaltung des Benutzerzustands), die für eine Umgebung besser geeignet sind als für die andere.
Das Verständnis dieser Unterschiede ist entscheidend für die effektive Nutzung von React und Next.js. Wir werden die Unterschiede und Anwendungsfälle detaillierter auf den Seiten Server und Client behandeln. Lassen Sie uns zunächst auf unserem Fundament aufbauen.
Anfrage-Antwort-Lebenszyklus
Im Großen und Ganzen folgen alle Websites dem gleichen Anfrage-Antwort-Lebenszyklus:
- Benutzeraktion: Der Benutzer interagiert mit einer Webanwendung. Dies kann das Anklicken eines Links, das Absenden eines Formulars oder das direkte Eingeben einer URL in die Adressleiste des Browsers sein.
- 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 zusätzliche Daten, falls erforderlich. - Server: Der Server verarbeitet die Anfrage und antwortet mit den entsprechenden Ressourcen. Dieser Prozess kann mehrere Schritte umfassen wie Routing, Datenabruf usw.
- 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 angeforderte Ressourcen (z.B. HTML, CSS, JavaScript, statische Assets usw.).
- Client: Der Client analysiert die Ressourcen, um die Benutzeroberfläche zu rendern.
- Benutzeraktion: Sobald die Benutzeroberfläche gerendert ist, kann der Benutzer mit ihr interagieren, und der gesamte Prozess beginnt erneut.
Ein wesentlicher Teil des Aufbaus einer hybriden Webanwendung ist die Entscheidung, wie die Arbeit im Lebenszyklus aufgeteilt wird und wo die Netzwerkgrenze platziert wird.
Netzwerkgrenze
In der Webentwicklung ist die Netzwerkgrenze eine konzeptionelle Linie, die verschiedene Umgebungen trennt. Zum Beispiel den Client und den Server oder den Server und den Datenspeicher.
In React wählen Sie, wo Sie die Client-Server-Netzwerkgrenze am sinnvollsten platzieren.
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 zu betrachten, wie Dateien in Ihrer Anwendung voneinander abhängen.
Sie können die React "use client" Konvention verwenden, um die Grenze zu definieren. Es gibt auch eine "use server" Konvention, die React anweist, einige Berechnungen auf dem Server durchzuführen.
Aufbau hybrider Anwendungen
Bei der Arbeit in diesen Umgebungen ist es hilfreich, den Codefluss in Ihrer Anwendung als unidirektional zu betrachten. Mit anderen Worten: Während einer Antwort fließt der 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 die gleiche Anfrage wiederzuverwenden. Dies macht es einfacher zu verstehen, wo Sie Ihre Komponenten rendern und wo Sie die Netzwerkgrenze platzieren möchten.
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 betrachten, wie Sie Client- und Server-Komponenten im gleichen Komponentenbaum verschachteln können.