ppr

Partial Prerendering (PPR) ermöglicht es Ihnen, statische und dynamische Komponenten in derselben Route zu kombinieren. Erfahren Sie mehr über PPR.

Verwendung von Partial Prerendering

Inkrementelle Einführung (Version 15)

In Next.js 15 können Sie Partial Prerendering in Layouts und Seiten schrittweise einführen, indem Sie die ppr-Option in next.config.js auf incremental setzen und die experimental_ppr Route-Konfigurationsoption 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, die keine experimental_ppr haben, verwenden standardmäßig false und werden nicht mit PPR vorgerendert. Sie müssen PPR für jede Route explizit aktivieren.
• experimental_ppr gilt für alle untergeordneten Elemente des Routensegments, einschließlich verschachtelter Layouts und Seiten. Sie müssen es nicht in jede Datei einfügen, nur in das oberste Segment einer Route.
• Um PPR für untergeordnete Segmente zu deaktivieren, können Sie experimental_ppr in dem untergeordneten Segment auf false setzen.