Server-Komponenten
React Server-Komponenten ermöglichen es Ihnen, Benutzeroberflächen zu erstellen, die auf dem Server gerendert und optional zwischengespeichert werden können. In Next.js wird die Rendering-Arbeit zusätzlich nach Routensegmenten aufgeteilt, um Streaming und partielles Rendering zu ermöglichen, und es gibt drei verschiedene Server-Rendering-Strategien:
Diese Seite erklärt, wie Server-Komponenten funktionieren, wann Sie sie verwenden können und die verschiedenen Server-Rendering-Strategien.
Vorteile des Server-Renderings
Es gibt einige Vorteile, die Rendering-Arbeit auf dem Server durchzuführen:
- Datenabruf: Server-Komponenten ermöglichen es Ihnen, den Datenabruf näher an Ihre Datenquelle zu verlagern. Dies kann die Leistung verbessern, indem die Zeit für den Datenabruf reduziert und die Anzahl der vom Client zu tätigenden Anfragen verringert wird.
- Sicherheit: Server-Komponenten ermöglichen es Ihnen, sensible Daten und Logik auf dem Server zu halten, wie Token und API-Schlüssel, ohne das Risiko, sie dem Client preiszugeben.
- Zwischenspeicherung: Durch das Rendering auf dem Server kann das Ergebnis zwischengespeichert und bei nachfolgenden Anfragen und für verschiedene Benutzer wiederverwendet werden. Dies kann die Leistung verbessern und Kosten senken, indem die Menge an Rendering und Datenabruf pro Anfrage reduziert wird.
- Leistung: Server-Komponenten bieten Ihnen zusätzliche Tools zur Leistungsoptimierung. Wenn Sie beispielsweise mit einer App beginnen, die vollständig aus Client-Komponenten besteht, kann die Verlagerung nicht-interaktiver Oberflächenelemente auf Server-Komponenten die Menge an clientseitigem JavaScript reduzieren. Dies ist vorteilhaft für Benutzer mit langsamer Internetverbindung oder weniger leistungsfähigen Geräten, da der Browser weniger clientseitiges JavaScript herunterladen, analysieren und ausführen muss.
- Initiale Seitenladung und First Contentful Paint (FCP): Auf dem Server können wir HTML generieren, damit Benutzer die Seite sofort sehen können, ohne auf das Herunterladen, Analysieren und Ausführen des für das Rendering erforderlichen JavaScript warten zu müssen.
- Suchmaschinenoptimierung und Sharability in sozialen Netzwerken: Das gerenderte HTML kann von Suchmaschinen-Bots zum Indexieren von Seiten und von Social-Media-Bots zur Generierung von Vorschau-Karten für Ihre Seiten genutzt werden.
- Streaming: Server-Komponenten ermöglichen es, die Rendering-Arbeit in Abschnitte zu unterteilen und sie dem Client zu streamen, sobald sie fertig sind. Dies erlaubt es Benutzern, Teile der Seite früher zu sehen, ohne auf das vollständige Rendering auf dem Server warten zu müssen.
Verwendung von Server-Komponenten in Next.js
Standardmäßig verwendet Next.js Server-Komponenten. Dies ermöglicht die automatische Implementierung von Server-Rendering ohne zusätzliche Konfiguration, und Sie können bei Bedarf Client-Komponenten verwenden, siehe Client-Komponenten.
Wie werden Server-Komponenten gerendert?
Auf dem Server verwendet Next.js die APIs von React, um das Rendering zu orchestrieren. Die Rendering-Arbeit wird in Abschnitte unterteilt: nach individuellen Routensegmenten und Suspense-Grenzen.
Jeder Abschnitt wird in zwei Schritten gerendert:
- React rendert Server-Komponenten in ein spezielles Datenformat namens React Server Component Payload (RSC Payload).
- Next.js verwendet den RSC Payload und JavaScript-Anweisungen für Client-Komponenten, um HTML auf dem Server zu rendern.
Dann auf dem Client:
- Das HTML wird verwendet, um sofort eine schnelle, nicht-interaktive Vorschau der Route anzuzeigen - dies geschieht nur beim initialen Seitenaufruf.
- Der React Server Components Payload wird verwendet, um die Client- und Server-Komponentenbäume abzugleichen und das DOM zu aktualisieren.
- Die JavaScript-Anweisungen werden verwendet, um Client-Komponenten zu hydratisieren und die Anwendung interaktiv zu machen.
Was ist der React Server Component Payload (RSC)?
Der RSC Payload ist eine kompakte binäre Darstellung des gerenderten React Server Components-Baums. Er wird von React auf dem Client verwendet, um das DOM des Browsers zu aktualisieren. Der RSC Payload enthält:
- Das Rendering-Ergebnis von Server-Komponenten
- Platzhalter für Client-Komponenten und Referenzen auf deren JavaScript-Dateien
- Alle Props, die von einer Server-Komponente an eine Client-Komponente übergeben werden
Server-Rendering-Strategien
Es gibt drei Untergruppen des Server-Renderings: Statisch, Dynamisch und Streaming.
Statisches Rendering (Standard)
Beim Statischen Rendering werden Routen zur Buildzeit oder im Hintergrund nach Datenneuvalidierung gerendert. Das Ergebnis wird zwischengespeichert und kann an ein Content Delivery Network (CDN) verteilt werden. Diese Optimierung ermöglicht es, das Rendering-Ergebnis zwischen Benutzern und Serveranfragen zu teilen.
Statisches Rendering ist nützlich, wenn eine Route Daten enthält, die nicht benutzerspezifisch sind und zur Buildzeit bekannt sein können, wie ein statischer Blog-Beitrag oder eine Produktseite.
Dynamisches Rendering
Beim Dynamischen Rendering werden Routen für jeden Benutzer zur Anforderungszeit gerendert.
Dynamisches Rendering ist nützlich, wenn eine Route Daten enthält, die benutzerspezifisch sind oder Informationen enthalten, die nur zur Anforderungszeit bekannt sind, wie Cookies oder URL-Suchparameter.
Dynamische Routen mit zwischengespeicherten Daten
In den meisten Websites sind Routen weder vollständig statisch noch vollständig dynamisch - es ist ein Spektrum. Beispielsweise kann eine E-Commerce-Seite zwischengespeicherte Produktdaten verwenden, die in regelmäßigen Abständen neu validiert werden, aber auch nicht zwischengespeicherte, personalisierte Kundendaten enthalten.
In Next.js können Sie dynamisch gerenderte Routen haben, die sowohl zwischengespeicherte als auch nicht zwischengespeicherte Daten enthalten. Dies liegt daran, dass der RSC Payload und die Daten separat zwischengespeichert werden. Dies ermöglicht es Ihnen, dynamisches Rendering zu aktivieren, ohne sich Gedanken über die Leistungsauswirkungen des Datenabrufs zur Anforderungszeit machen zu müssen.
Weitere Informationen zum vollständigen Routen-Cache und Daten-Cache.
Wechsel zum dynamischen Rendering
Während des Renderings wird Next.js auf dynamisches Rendering der gesamten Route umschalten, wenn eine dynamische API oder eine nicht zwischengespeicherte Datenanfrage erkannt wird. Diese Tabelle fasst zusammen, wie dynamische APIs und Datenzwischenspeicherung beeinflussen, ob eine Route statisch oder dynamisch gerendert wird:
| Dynamische APIs | Daten | Route |
|---|---|---|
| Nein | Cached | Statisch gerendert |
| Ja | Cached | Dynamisch gerendert |
| Nein | Nicht cached | Dynamisch gerendert |
| Ja | Nicht cached | Dynamisch gerendert |
In der Tabelle oben muss eine Route, um vollständig statisch zu sein, alle Daten zwischengespeichert haben. Sie können jedoch eine dynamisch gerenderte Route haben, die sowohl zwischengespeicherte als auch nicht zwischengespeicherte Datenabrufe verwendet.
Als Entwickler müssen Sie nicht zwischen statischem und dynamischem Rendering wählen, da Next.js automatisch die beste Rendering-Strategie für jede Route basierend auf den verwendeten Funktionen und APIs auswählt. Stattdessen entscheiden Sie, wann Sie bestimmte Daten zwischenspeichern oder Daten neu validieren möchten, und Sie können Teile Ihrer Benutzeroberfläche optional streamen.
Dynamische APIs
Dynamische APIs basieren auf Informationen, die nur zur Anforderungszeit (und nicht im Voraus beim Prerendering) bekannt sind. Die Verwendung einer dieser APIs signalisiert die Absicht des Entwicklers und führt dazu, dass die gesamte Route zur Anforderungszeit dynamisch gerendert wird. Zu diesen APIs gehören:
Streaming
Streaming ermöglicht es, die Benutzeroberfläche progressiv vom Server zu rendern. Die Arbeit wird in Chunks aufgeteilt und an den Client gestreamt, sobald sie fertig ist. Dadurch kann der Benutzer Teile der Seite sofort sehen, noch bevor der gesamte Inhalt fertig gerendert ist.
Streaming ist im Next.js App Router standardmäßig integriert. Dies hilft, sowohl die anfängliche Seitenladegeschwindigkeit als auch die UI zu verbessern, die von langsameren Datenabrufen abhängt, die das Rendern der gesamten Route blockieren würden. Zum Beispiel Bewertungen auf einer Produktseite.
Sie können das Streaming von Routensegmenten mit loading.js und UI-Komponenten mit React Suspense starten. Weitere Informationen finden Sie im Abschnitt Lade-UI und Streaming.