Partielle Vorrendering

Hinweis: Partielles Vorrendering ist eine experimentelle Funktion, die nur in der Canary-Version verfügbar ist und sich ändern kann. Es ist nicht für den Produktiveinsatz bereit.

Partielles Vorrendering (PPR) ermöglicht es Ihnen, statische und dynamische Komponenten in derselben Route zu kombinieren.

Während des Builds rendert Next.js so viel der Route wie möglich vor. Wenn dynamischer Code erkannt wird, wie das Lesen aus der eingehenden Anfrage, können Sie die relevante Komponente mit einer React Suspense-Grenze umschließen. Der Suspense-Fallback wird dann in das vorgerendertes HTML einbezogen.

🎥 Ansehen: Warum PPR und wie es funktioniert → YouTube (10 Minuten).

Hintergrund

PPR ermöglicht es Ihrem Next.js-Server, sofort vorgerendertes Inhalte zu senden.

Um Client-zu-Server-Wasserfälle zu verhindern, beginnen dynamische Komponenten parallel mit dem Streaming vom Server während der Bereitstellung des ursprünglichen Vorrenderings. Dies stellt sicher, dass dynamische Komponenten mit dem Rendern beginnen können, bevor Client-JavaScript im Browser geladen wurde.

Um nicht viele HTTP-Anfragen für jede dynamische Komponente zu erstellen, kann PPR das statische Vorrendering und dynamische Komponenten in eine einzige HTTP-Anfrage kombinieren. Dies stellt sicher, dass keine mehrfachen Netzwerk-Roundtrips für jede dynamische Komponente erforderlich sind.

Verwendung von Partiellem Vorrendering

Inkrementelle Einführung (Version 15)

In Next.js 15 können Sie Partielles Vorrendering schrittweise in Layouts und Seiten einführen, indem Sie die Option ppr in next.config.js auf incremental setzen und die experimental_ppr-Routenkonfigurationsoption am Anfang der Datei exportieren:

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

/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    ppr: 'incremental',
  },
}
 
module.exports = nextConfig

import { Suspense } from "react"
import { StaticComponent, DynamicComponent, Fallback } from "@/app/ui"
 
export const experimental_ppr = true
 
export default function Page() {
  return {
     <>
      <StaticComponent />
      <Suspense fallback={<Fallback />}>
        <DynamicComponent />
      </Suspense>
     </>
  };
}

Hinweis:

• Routen ohne experimental_ppr werden standardmäßig auf false gesetzt und nicht mit PPR vorgerendert. Sie müssen PPR für jede Route explizit aktivieren.
• experimental_ppr gilt für alle Kindersegmente der Route, einschließlich verschachtelter Layouts und Seiten. Sie müssen es nicht in jeder Datei hinzufügen, nur im obersten Segment einer Route.
• Um PPR für Kindersegmente zu deaktivieren, können Sie experimental_ppr in dem Kindersegment auf false setzen.

PPR aktivieren (Version 14)

Für Version 14 können Sie es aktivieren, indem Sie die Option ppr in Ihrer next.config.js-Datei hinzufügen. Dies gilt für alle Routen in Ihrer Anwendung:

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

/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    ppr: true,
  },
}
 
module.exports = nextConfig

Dynamische Komponenten

Beim Vorrendering Ihrer Route während next build benötigt Next.js, dass dynamische APIs mit React Suspense umschlossen sind. Der fallback wird dann in das Vorrendering einbezogen.

Zum Beispiel bei Verwendung von Funktionen wie cookies oder headers:

import { cookies } from 'next/headers'
 
export async function User() {
  const session = (await cookies()).get('session')?.value
  return '...'
}

Diese Komponente erfordert das Lesen der eingehenden Anfrage zum Lesen von Cookies. Um dies mit PPR zu verwenden, sollten Sie die Komponente mit Suspense umschließen:

import { Suspense } from 'react'
import { User, AvatarSkeleton } from './user'
 
export const experimental_ppr = true
 
export default function Page() {
  return (
    <section>
      <h1>Dies wird vorgerendert</h1>
      <Suspense fallback={<AvatarSkeleton />}>
        <User />
      </Suspense>
    </section>
  )
}

Komponenten wechseln nur in dynamisches Rendering, wenn der Wert abgerufen wird.

Wenn Sie beispielsweise searchParams von einer page lesen, können Sie diesen Wert als Prop an eine andere Komponente weitergeben:

import { Table } from './table'
 
export default function Page({
  searchParams,
}: {
  searchParams: Promise<{ sort: string }>
}) {
  return (
    <section>
      <h1>Dies wird vorgerendert</h1>
      <Table searchParams={searchParams} />
    </section>
  )
}

In der Tabellenkomponente wird das Abrufen des Wertes aus searchParams die Komponente dynamisch ausführen:

export async function Table({
  searchParams,
}: {
  searchParams: Promise<{ sort: string }>
}) {
  const sort = (await searchParams).sort === 'true'
  return '...'
}