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. Es gibt drei verschiedene Server-Rendering-Strategien:

• Statisches Rendering
• Dynamisches Rendering
• Streaming

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

Vorteile des Server-Renderings

Das Rendering auf dem Server bietet mehrere Vorteile:

• Datenabfrage: Server Components ermöglichen es, Datenabfragen näher an die Datenquelle auf den Server zu verlagern. Dies kann die Leistung verbessern, indem die Zeit für das Abrufen der benötigten Daten und die Anzahl der Client-Anfragen reduziert wird.
• Sicherheit: Server Components ermöglichen es, sensible Daten und Logik wie Tokens und API-Schlüssel auf dem Server zu belassen, ohne sie dem Client auszusetzen.
• Caching: Durch das Rendering auf dem Server kann das Ergebnis zwischengespeichert und bei nachfolgenden Anfragen sowie für verschiedene Benutzer wiederverwendet werden. Dies verbessert die Leistung und reduziert Kosten durch weniger Rendering und Datenabfragen pro Anfrage.
• Leistung: Server Components bieten zusätzliche Werkzeuge zur Leistungsoptimierung. Wenn Sie beispielsweise mit einer App beginnen, die vollständig aus Client Components besteht, können nicht-interaktive UI-Teile durch Server Components ersetzt werden, um den clientseitigen JavaScript-Bedarf zu reduzieren. Dies ist besonders vorteilhaft für Benutzer mit langsamer Internetverbindung oder weniger leistungsfähigen Geräten.
• Erstmaliger Seitenaufbau und First Contentful Paint (FCP): Auf dem Server können wir HTML generieren, das Benutzern sofortige Anzeige ermöglicht, ohne auf das Herunterladen, Parsen und Ausführen des JavaScripts warten zu müssen.
• Suchmaschinenoptimierung und Social-Media-Teilbarkeit: Das gerenderte HTML kann von Suchmaschinen-Bots zum Indizieren und von Social-Media-Bots zur Generierung von Vorschaubildern verwendet werden.
• Streaming: Server Components ermöglichen es, das Rendering in Teile aufzuteilen und diese nach Fertigstellung an den Client zu streamen. So können Benutzer Teile der Seite früher sehen, ohne auf das vollständige Rendering warten zu müssen.

Verwendung von Server Components in Next.js

Standardmäßig verwendet Next.js Server Components. Dadurch können Sie Server-Rendering ohne zusätzliche Konfiguration implementieren und bei Bedarf auf Client Components zurückgreifen.

Wie werden Server Components gerendert?

Auf dem Server verwendet Next.js React-APIs zur Steuerung des Renderings. Die 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 von Client Components, um HTML auf dem Server zu rendern.

Auf dem Client:

1. Das HTML wird verwendet, um sofort eine schnelle, nicht-interaktive Vorschau der Route anzuzeigen - dies gilt nur für den ersten Seitenaufbau.
2. Der React Server Components Payload wird verwendet, um die Bäume von 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 Position von Client Components 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 während des Builds 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 die gemeinsame Nutzung des Rendering-Ergebnisses zwischen Benutzern und Server-Anfragen.

Statisches Rendering eignet sich für Routen mit Daten, die nicht personalisiert sind und zum Build-Zeitpunkt bekannt sein können, wie z.B. statische Blogbeiträge oder Produktseiten.

Dynamisches Rendering

Beim dynamischen Rendering werden Routen für jeden Benutzer bei Anfrage gerendert.

Dynamisches Rendering eignet sich für Routen mit personalisierten Daten oder Informationen, die erst zum Anfragezeitpunkt bekannt sind, wie Cookies oder URL-Suchparameter.

Dynamische Routen mit zwischengespeicherten Daten

In den meisten Websites sind Routen nicht vollständig statisch oder dynamisch - es handelt sich um ein Spektrum. Beispielsweise könnte eine E-Commerce-Seite zwischengespeicherte Produktdaten verwenden, die in 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, da RSC Payload und Daten separat zwischengespeichert werden. So können Sie dynamisches Rendering nutzen, ohne sich um Leistungseinbußen durch Datenabfragen zum Anfragezeitpunkt sorgen zu müssen.

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

Wechsel zu dynamischem Rendering

Während des Renderings wechselt Next.js zum dynamischen Rendering der gesamten Route, wenn eine dynamische Funktion oder nicht zwischengespeicherte Datenanfrage erkannt wird. Diese Tabelle zeigt, wie dynamische Funktionen und Daten-Caching das Rendering beeinflussen:

In der obigen Tabelle müssen für eine vollständig statische Route alle Daten 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 Strategie für jede Route basierend auf den verwendeten Features und APIs wählt. Stattdessen entscheiden Sie, wann Sie bestimmte Daten zwischenspeichern oder revalidieren, und können Teile Ihrer UI streamen.

Dynamische Funktionen

Dynamische Funktionen basieren auf Informationen, die erst zum Anfragezeitpunkt bekannt sind, wie Cookies, aktuelle Request-Header oder URL-Suchparameter. In Next.js sind dies:

• cookies() und headers(): Die Verwendung in einer Server Component führt zum dynamischen Rendering der gesamten Route.
• searchParams: Die Verwendung der searchParams-Prop auf einer Page führt zum dynamischen Rendering der Seite.

Die Verwendung dieser Funktionen führt zum dynamischen Rendering der gesamten Route.

Streaming

Streaming ermöglicht das schrittweise Rendering von UI vom Server. Die Arbeit wird in Teile aufgeteilt und nach Fertigstellung an den Client gestreamt. So können Benutzer Teile der Seite sofort sehen, bevor der gesamte Inhalt fertig gerendert ist.

Streaming ist standardmäßig in den Next.js App Router integriert. Dies verbessert sowohl die initiale Ladeleistung als auch die UI, die von langsamen Datenabfragen abhängt, die das Rendering der gesamten Route blockieren würden, z.B. Bewertungen auf einer Produktseite.

Sie können das Streaming von Routensegmenten mit loading.js und UI-Komponenten über React Suspense starten. Weitere Informationen finden Sie im Abschnitt Loading UI und Streaming.