Partielle Vorabrendering (Partial Prerendering)

Bisher haben Sie über statisches und dynamisches Rendering sowie das Streaming dynamischer Inhalte, die von Daten abhängen, gelernt. In diesem Kapitel erfahren Sie, wie Sie statisches Rendering, dynamisches Rendering und Streaming in derselben Route mit Partieller Vorabrendering (PPR) kombinieren können.

Partielle Vorabrendering ist ein experimentelles Feature, das in Next.js 14 eingeführt wurde. Der Inhalt dieser Seite kann aktualisiert werden, sobald das Feature stabiler wird. PPR ist nur in den Next.js Canary-Versionen (next@canary) verfügbar, nicht in der stabilen Version von Next.js. Wir empfehlen noch nicht, Partielle Vorabrendering in der Produktion einzusetzen.

Um die Canary-Version von Next.js zu installieren, führen Sie folgenden Befehl aus:

pnpm install next@canary

Statische vs. dynamische Routen

Bei den meisten heutigen Web-Apps müssen Sie sich entweder für statisches oder dynamisches Rendering für die gesamte Anwendung oder für eine spezifische Route entscheiden. In Next.js wird eine Route vollständig dynamisch, wenn Sie eine dynamische Funktion aufrufen (z. B. eine Datenbankabfrage).

Die meisten Routen sind jedoch weder vollständig statisch noch dynamisch. Betrachten Sie beispielsweise eine E-Commerce-Website. Sie möchten vielleicht den Großteil der Produktinformationsseite statisch rendern, aber den Warenkorb des Benutzers und empfohlene Produkte dynamisch abrufen, um personalisierte Inhalte anzuzeigen.

Kehren wir zu Ihrer Dashboard-Seite zurück: Welche Komponenten würden Sie als statisch bzw. dynamisch einstufen?

Wenn Sie bereit sind, klicken Sie auf den Button unten, um zu sehen, wie wir die Dashboard-Route aufteilen würden:

Was ist Partielle Vorabrendering?

Next.js 14 hat eine experimentelle Version von Partieller Vorabrendering eingeführt – ein neues Rendering-Modell, das die Vorteile von statischem und dynamischem Rendering in derselben Route kombiniert. Beispiel:

Wenn ein Benutzer eine Route aufruft:

• Wird eine statische Route-Shell mit Navigation und Produktinformationen bereitgestellt, was einen schnellen initialen Ladevorgang gewährleistet.
• Die Shell lässt Lücken für dynamische Inhalte wie den Warenkorb und empfohlene Produkte, die asynchron nachgeladen werden.
• Die asynchronen Lücken werden parallel gestreamt, wodurch die Gesamtladezeit der Seite reduziert wird.

Wie funktioniert Partielle Vorabrendering?

Partielle Vorabrendering nutzt Reacts Suspense (das Sie im vorherigen Kapitel kennengelernt haben), um das Rendering bestimmter Teile Ihrer Anwendung zu verzögern, bis eine Bedingung erfüllt ist (z. B. Daten geladen wurden).

Der Suspense-Fallback wird zusammen mit den statischen Inhalten in die initiale HTML-Datei eingebettet. Zum Build-Zeitpunkt (oder während der Revalidierung) werden die statischen Inhalte vorab gerendert, um eine statische Shell zu erstellen. Das Rendering dynamischer Inhalte wird aufgeschoben, bis der Benutzer die Route anfordert.

Das Einwickeln einer Komponente in Suspense macht die Komponente selbst nicht dynamisch, sondern Suspense dient als Grenze zwischen Ihrem statischen und dynamischen Code.

Sehen wir uns an, wie Sie PPR in Ihrer Dashboard-Route implementieren können.

Implementierung von Partieller Vorabrendering

Aktivieren Sie PPR für Ihre Next.js-App, indem Sie die ppr-Option in Ihrer next.config.ts-Datei hinzufügen:

import type { NextConfig } from 'next';
 
const nextConfig: NextConfig = {
  experimental: {
    ppr: 'incremental'
  }
};
 
export default nextConfig;

Der Wert 'incremental' ermöglicht es Ihnen, PPR für bestimmte Routen zu aktivieren.

Fügen Sie anschließend die experimental_ppr-Segmentkonfigurationsoption zu Ihrem Dashboard-Layout hinzu:

import SideNav from '@/app/ui/dashboard/sidenav';
 
export const experimental_ppr = true;
 
// ...

Das war's. In der Entwicklung werden Sie möglicherweise keinen Unterschied in Ihrer Anwendung bemerken, aber in der Produktion sollten Sie eine Leistungsverbesserung feststellen. Next.js wird die statischen Teile Ihrer Route vorab rendern und die dynamischen Teile bis zur Benutzeranfrage zurückstellen.

Das Tolle an Partieller Vorabrendering ist, dass Sie Ihren Code nicht ändern müssen, um es zu nutzen. Solange Sie Suspense verwenden, um die dynamischen Teile Ihrer Route zu umschließen, erkennt Next.js, welche Teile statisch und welche dynamisch sind.

Wir glauben, dass PPR das Potenzial hat, das Standard-Rendering-Modell für Webanwendungen zu werden, indem es die Vorteile von statischen Websites und dynamischem Rendering vereint. Es ist jedoch noch experimentell. Wir hoffen, es in Zukunft zu stabilisieren und zur Standardmethode für die Entwicklung mit Next.js zu machen.

Sie können diese Änderungen jetzt rückgängig machen und mit dem nächsten Kapitel fortfahren.

Zusammenfassung

Zur Erinnerung: Sie haben bisher einige Maßnahmen ergriffen, um das Datenabrufen in Ihrer Anwendung zu optimieren:

1. Eine Datenbank in derselben Region wie Ihr Anwendungscode erstellt, um die Latenz zwischen Server und Datenbank zu reduzieren.
2. Daten auf dem Server mit React Server Components abgerufen. Dies ermöglicht es Ihnen, aufwändige Datenabfragen und Logik auf dem Server zu belassen, reduziert das clientseitige JavaScript-Bundle und verhindert, dass Ihre Datenbankgeheimnisse dem Client preisgegeben werden.
3. SQL verwendet, um nur die benötigten Daten abzurufen, wodurch die übertragene Datenmenge pro Anfrage und der benötigte JavaScript-Code zur Datentransformation im Speicher reduziert wird.
4. Datenabrufe parallelisiert – wo es sinnvoll war.
5. Streaming implementiert, um zu verhindern, dass langsame Datenanfragen Ihre gesamte Seite blockieren, und dem Benutzer zu ermöglichen, mit der UI zu interagieren, ohne auf das Laden aller Inhalte warten zu müssen.
6. Datenabrufe in die Komponenten verschoben, die sie benötigen, wodurch isoliert wird, welche Teile Ihrer Routen dynamisch sein sollten.

Im nächsten Kapitel betrachten wir zwei gängige Muster, die Sie beim Datenabruf möglicherweise implementieren müssen: Suche und Paginierung.