Server Components

React Server Components ermöglichen es Ihnen, UI zu schreiben, die auf dem Server gerendert und optional zwischengespeichert werden kann. In Next.js wird die Rendering-Arbeit weiter nach Routensegmenten aufgeteilt, um Streaming und partielles Rendering zu ermöglichen, und es gibt drei verschiedene Server-Rendering-Strategien:

• Statisches Rendering
• Dynamisches Rendering
• Streaming

Diese Seite erklärt, wie Server Components funktionieren, wann Sie sie verwenden könnten und die verschiedenen Server-Rendering-Strategien.

Vorteile des Server-Renderings

Das Rendering auf dem Server bietet mehrere Vorteile, darunter:

• Datenabruf: Server Components ermöglichen es Ihnen, den Datenabruf näher an die Datenquelle auf den Server zu verlagern. Dies kann die Leistung verbessern, indem die Zeit für den Abruf der für das Rendering benötigten Daten reduziert wird und die Anzahl der Anfragen, die der Client stellen muss.
• Sicherheit: Server Components ermöglichen es Ihnen, sensible Daten und Logik wie Tokens und API-Schlüssel auf dem Server zu belassen, ohne das Risiko, sie dem Client preiszugeben.
• Caching: Durch das Rendering auf dem Server kann das Ergebnis zwischengespeichert und bei nachfolgenden Anfragen und über Benutzer hinweg wiederverwendet werden. Dies kann die Leistung verbessern und die Kosten senken, indem die Menge an Rendering und Datenabruf bei jeder Anfrage reduziert wird.
• Bundle-Größen: Server Components ermöglichen es Ihnen, große Abhängigkeiten, die zuvor die Größe des Client-JavaScript-Bundles beeinflusst haben, auf dem Server zu belassen. Dies ist vorteilhaft für Benutzer mit langsamerem Internet oder weniger leistungsfähigen Geräten, da der Client kein JavaScript für Server Components herunterladen, parsen und ausführen muss.
• Erste Seitenladung und First Contentful Paint (FCP): Auf dem Server können wir HTML generieren, das es Benutzern ermöglicht, die Seite sofort anzuzeigen, ohne auf das Herunterladen, Parsen und Ausführen des JavaScripts warten zu müssen, das zum Rendern der Seite benötigt wird.
• Suchmaschinenoptimierung und Teilbarkeit in sozialen Netzwerken: Das gerenderte HTML kann von Suchmaschinen-Bots zum Indizieren Ihrer Seiten und von Social-Media-Bots zum Generieren von Vorschaukarten für Ihre Seiten verwendet werden.
• Streaming: Server Components ermöglichen es Ihnen, die Rendering-Arbeit in Teile aufzuteilen und sie an den Client zu streamen, sobald sie fertig sind. Dies ermöglicht es dem Benutzer, Teile der Seite früher zu sehen, ohne auf das vollständige Rendering der Seite auf dem Server warten zu müssen.

Verwendung von Server Components in Next.js

Standardmäßig verwendet Next.js Server Components. Dies ermöglicht es Ihnen, Server-Rendering automatisch ohne zusätzliche Konfiguration zu implementieren, und Sie können bei Bedarf Client Components verwenden, siehe Client Components.

Wie werden Server Components gerendert?

Auf dem Server verwendet Next.js React-APIs, um das Rendering zu orchestrieren. Die Rendering-Arbeit wird in Teile aufgeteilt: nach einzelnen Routensegmenten und Suspense Boundaries.

Jeder Teil wird in zwei Schritten gerendert:

1. React rendert Server Components in ein spezielles Datenformat namens React Server Component Payload (RSC Payload).
2. Next.js verwendet den RSC Payload und JavaScript-Anweisungen für Client Components, um HTML auf dem Server zu rendern.

Dann auf dem Client:

1. Das HTML wird verwendet, um sofort eine schnelle nicht-interaktive Vorschau der Route anzuzeigen - dies gilt nur für das erste Laden der Seite.
2. Der React Server Components Payload wird verwendet, um die Bäume der Client- und Server Components abzugleichen und das DOM zu aktualisieren.
3. Die JavaScript-Anweisungen werden verwendet, um Client Components zu hydrieren 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 gerenderte Ergebnis von Server Components
• Platzhalter für die Positionen, an denen Client Components gerendert werden sollten, und Referenzen zu ihren JavaScript-Dateien
• Alle Props, die von einer Server Component an eine Client Component übergeben werden

Server-Rendering-Strategien

Es gibt drei Unterarten des Server-Renderings: Statisch, Dynamisch und Streaming.

Statisches Rendering (Standard)

Beim statischen Rendering werden Routen zum Build-Zeitpunkt oder im Hintergrund nach Daten-Revalidierung gerendert. Das Ergebnis wird zwischengespeichert und kann an ein Content Delivery Network (CDN) weitergeleitet werden. Diese Optimierung ermöglicht es Ihnen, das Ergebnis der Rendering-Arbeit zwischen Benutzern und Server-Anfragen zu teilen.

Statisches Rendering ist nützlich, wenn eine Route Daten enthält, die nicht personalisiert sind und zum Build-Zeitpunkt bekannt sein können, wie z.B. ein statischer Blog-Post oder eine Produktseite.

Dynamisches Rendering

Beim dynamischen Rendering werden Routen für jeden Benutzer zum Anfragezeitpunkt gerendert.

Dynamisches Rendering ist nützlich, wenn eine Route personalisierte Daten für den Benutzer enthält oder Informationen, die erst zum Anfragezeitpunkt bekannt sind, wie Cookies oder die Suchparameter der URL.

Dynamische Routen mit zwischengespeicherten Daten

Bei den meisten Websites sind Routen nicht vollständig statisch oder dynamisch - es ist ein Spektrum. Beispielsweise können Sie eine E-Commerce-Seite haben, die zwischengespeicherte Produktdaten verwendet, die in bestimmten Intervallen revalidiert werden, aber auch nicht zwischengespeicherte, personalisierte Kundendaten.

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, sich für dynamisches Rendering zu entscheiden, ohne sich um die Leistungsauswirkungen des Abrufs aller Daten zum Anfragezeitpunkt sorgen zu müssen.

Erfahren Sie mehr über den Full-Route Cache und den Data Cache.

Wechsel zu dynamischem Rendering

Während des Renderings, wenn eine dynamische Funktion oder eine nicht zwischengespeicherte Datenanfrage entdeckt wird, wechselt Next.js zum dynamischen Rendering der gesamten Route. Diese Tabelle fasst zusammen, wie dynamische Funktionen und Daten-Caching beeinflussen, ob eine Route statisch oder dynamisch gerendert wird:

In der obigen Tabelle muss für eine vollständig statische Route der gesamte Datenbestand zwischengespeichert sein. Sie können jedoch eine dynamisch gerenderte Route haben, die sowohl zwischengespeicherte als auch nicht zwischengespeicherte Datenabfragen 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 Features und APIs auswählt. Stattdessen wählen Sie aus, wann Sie bestimmte Daten zwischenspeichern oder revalidieren, und Sie können sich dafür entscheiden, Teile Ihrer UI zu streamen.

Dynamische Funktionen

Dynamische Funktionen basieren auf Informationen, die erst zum Anfragezeitpunkt bekannt sind, wie die Cookies eines Benutzers, aktuelle Anfrage-Header oder die Suchparameter der URL. In Next.js sind diese dynamischen Funktionen:

• cookies() und headers(): Die Verwendung dieser Funktionen in einer Server Component führt dazu, dass die gesamte Route zum Anfragezeitpunkt dynamisch gerendert wird.
• useSearchParams():
  • In Client Components wird das statische Rendering übersprungen und stattdessen alle Client Components bis zur nächsten übergeordneten Suspense-Grenze auf dem Client gerendert.
  • Wir empfehlen, die Client Component, die useSearchParams() verwendet, in eine <Suspense/>-Grenze einzubetten. Dies ermöglicht es, alle darüber liegenden Client Components statisch zu rendern. Beispiel.
• searchParams: Die Verwendung der Pages-Prop führt dazu, dass die Seite zum Anfragezeitpunkt dynamisch gerendert wird.

Die Verwendung einer dieser Funktionen führt dazu, dass die gesamte Route zum Anfragezeitpunkt dynamisch gerendert wird.

Streaming

Streaming ermöglicht es Ihnen, UI schrittweise vom Server zu rendern. Die Arbeit wird in Teile aufgeteilt und an den Client gestreamt, sobald sie fertig sind. Dies ermöglicht es dem Benutzer, Teile der Seite sofort zu sehen, bevor der gesamte Inhalt fertig gerendert wurde.

Streaming ist standardmäßig in den Next.js App Router integriert. Dies hilft sowohl die anfängliche Ladeleistung der Seite zu verbessern als auch UI, die von langsameren Datenabfragen abhängt, die das Rendering der gesamten Route blockieren würden. Zum Beispiel Bewertungen auf einer Produktseite.

Sie können mit dem Streaming von Routensegmenten mit loading.js und UI-Komponenten mit React Suspense beginnen. Weitere Informationen finden Sie im Abschnitt Lade-UI und Streaming.