Server Components als experimentelle Funktion in Next.js

Das React-Team führte im Dezember 2020 Serverkomponenten ein. Keine Komponenten in gebündelter Größe haben bei den Benutzern für viel Aufregung gesorgt, da dies bei großen Anwendungen ein bekanntes Problem ist. In diesem Artikel wird der Stand der Serverkomponenten erörtert und erläutert, wie sie derzeit als experimentelles Feature in NextJS verwendet werden können.

Serverkomponenten ermöglichen es uns, die verbesserte Leistung herkömmlicher servergerenderter Anwendungen mit clientseitigen Anwendungen zu kombinieren. Bei Serverkomponenten wird sich die Art und Weise der Strukturierung von React-Komponenten ändern. Wie bei Serverkomponenten erhalten wir nicht nur die reduzierte Paketgröße von Javascript im Browser, sondern auch die anfängliche Ladezeit der Seite. Es wird auch das Abrufen von Daten vereinfachen und den Zugriff auf Datenbanken und Dateisysteme verbessern, was in ReactJS derzeit nicht existiert.

Unterschiede zum serverseitigen Rendern (SSR)

Es gibt also viel Verwirrung, wenn Serverkomponenten mit serverseitigem Rendern verglichen werden. Sie sind beide unterschiedlich und ergänzen sich dennoch.

Serverseitiges Rendern wird pro Seite implementiert. Das bedeutet, dass es sich eher um eine Implementierung auf hoher Ebene handelt, während die Serverkomponenten auf der anderen Seite komponentenbasiert sind.

SSR reduziert die anfängliche Ladezeit, indem es HTML vom Server an den Client sendet. Das bedeutet, dass auf der Clientseite immer noch HTML heruntergeladen, analysiert und ausgeführt werden muss. Die Serverkomponente sendet mithilfe von HTTP Streaming eine Beschreibung der gerenderten Benutzeroberfläche vom Server zum Client. ReactJS führt diese neuen Daten dann intelligent mit clientseitigen Komponenten zusammen, wodurch der Status der clientseitigen Komponenten aufrechterhalten wird.

Da Serverkomponenten nicht mit Browsern verbunden sind, funktioniert die Verwaltung des Zustands oder anderer Browser-APIs hier nicht, z. B. useState, useEffect, window usw.

React Suspense und Concurrent Mode

React Server Components verwenden Suspense, sodass wir problemlos warten können, bis Ihr Code geladen ist. Und um das Warten auf den Status oder das Skelett zu ermöglichen, während diese Daten abgerufen werden. Spannung, die die Techniken des HTML-Streamings und der selektiven Flüssigkeitszufuhr verwendet, sorgt für eine bessere Benutzererfahrung. Noch wichtiger ist, dass Suspense den Netzwerkwasserfall verhindert.

Wie Sie im Diagramm sehen, erfolgen die API-Anfragen in der Reihenfolge. So passiert es derzeit in ReactJS beim Abrufen der Komponenten.

Mit Suspense können API-Anfragen parallel abgerufen werden, indem der Client nicht am Rendern gehindert wird und show fallback loader aufgerufen wird, während der Inhalt geladen wird.

Im Parallelmodus werden die Status mehrfach auf optimale Weise aktualisiert, sodass der Inhalt als eingehende Datenströme angezeigt wird, anstatt darauf zu warten, dass die gesamte Antwort abgeschlossen ist.

Demo der NextJS-Serverkomponenten

In dieser Demo werden wir mit den Funktionen RSC und Concurrent experimentieren. Durch Demo der NextJS Server-Komponenten Das NextJS-Projekt kann mithilfe der experimentellen Funktionen von React 18 einfach gerüst werden.

Wir verwenden JSON-Platzhalter als Datenquelle für diese Demo.

Im Seitenordner wird index.server.tsx erstellt, um die Seite auf dem Server zu rendern.

Beiträge werden mithilfe der Komponente Posts. server.tsx auf dem Server abgerufen. Die Komponente ist in ein Suspense-Element eingebettet, sodass beim Laden der Serverkomponente ein Fallback-Spinner angezeigt werden kann.

Die PostWithData-Serverkomponente umfasst Serverkomponenten, die die Kommentare und Benutzer abrufen. Diese verschachtelten Serverkomponenten sind in Suspense-Elemente eingebettet, sodass beim Laden ein Ladespinner angezeigt werden kann.

Es ist zu beachten, dass Serverkomponenten Client-Komponenten rendern können, aber umgekehrt ist es nicht möglich. Aus diesem Grund ändert die Server-Komponente die Strukturierung von ReactJS-Anwendungen. Die vollständige und laufende Demo finden Sie hier.

Fazit

Serverkomponenten und gleichzeitige Funktionen sind zweifellos die wichtigsten Funktionen, die sich nicht nur auf die Leistung, sondern auch auf ein besseres UX-Erlebnis und eine bessere Struktur der Komponenten auswirken. Da sie experimentell sind, wird es wahrscheinlich stabiler sein und bis Mitte oder Ende dieses Jahres andere Ökosystem-Bibliotheken unterstützen.

Die Serverkomponente macht es einfacher, in NextJS auf Komponentenbasis als auf Seitenbasis zu rendern.