Routen-Segment-Konfiguration

Die Routen-Segment-Optionen ermöglichen es Ihnen, das Verhalten einer Page, eines Layouts oder eines Route Handlers zu konfigurieren, indem Sie die folgenden Variablen direkt exportieren:

export const dynamic = 'auto'
export const dynamicParams = true
export const revalidate = false
export const fetchCache = 'auto'
export const runtime = 'nodejs'
export const preferredRegion = 'auto'
export const maxDuration = 5

export default function MyComponent() {}

export const dynamic = 'auto'
export const dynamicParams = true
export const revalidate = false
export const fetchCache = 'auto'
export const runtime = 'nodejs'
export const preferredRegion = 'auto'
export const maxDuration = 5

export default function MyComponent() {}

Wichtig zu wissen:

• Die Werte der Konfigurationsoptionen müssen derzeit statisch analysierbar sein. Beispielsweise ist revalidate = 600 gültig, aber revalidate = 60 * 10 nicht.

Optionen

dynamic

Ändert das dynamische Verhalten eines Layouts oder einer Seite zu vollständig statisch oder vollständig dynamisch.

export const dynamic = 'auto'
// 'auto' | 'force-dynamic' | 'error' | 'force-static'

export const dynamic = 'auto'
// 'auto' | 'force-dynamic' | 'error' | 'force-static'

Wichtig zu wissen: Das neue Modell im app-Verzeichnis bevorzugt eine granulare Cache-Kontrolle auf Ebene der fetch-Anfragen gegenüber dem binären Alles-oder-Nichts-Modell von getServerSideProps und getStaticProps auf Seitenebene im pages-Verzeichnis. Die dynamic-Option ist eine Möglichkeit, sich wieder in das vorherige Modell einzuwählen, und bietet einen einfacheren Migrationspfad.

• 'auto' (Standard): Die Standardoption, um so viel wie möglich zu cachen, ohne Komponenten daran zu hindern, dynamisches Verhalten zu aktivieren.
• 'force-dynamic': Erzwingt dynamisches Rendering und ungecachtes Datenabrufen eines Layouts oder einer Seite, indem das Caching aller fetch-Anfragen deaktiviert und immer revalidiert wird. Diese Option entspricht:
  • getServerSideProps() im pages-Verzeichnis.
  • Setzen der Option jeder fetch()-Anfrage in einem Layout oder einer Seite auf { cache: 'no-store', next: { revalidate: 0 } }.
  • Setzen der Segmentkonfiguration auf export const fetchCache = 'force-no-store'
• 'error': Erzwingt statisches Rendering und cacht die Daten eines Layouts oder einer Seite, indem ein Fehler ausgelöst wird, wenn Komponenten dynamische Funktionen oder ungecachte Daten verwenden. Diese Option entspricht:
  • getStaticProps() im pages-Verzeichnis.
  • Setzen der Option jeder fetch()-Anfrage in einem Layout oder einer Seite auf { cache: 'force-cache' }.
  • Setzen der Segmentkonfiguration auf fetchCache = 'only-cache', dynamicParams = false.
  • dynamic = 'error' ändert den Standardwert von dynamicParams von true zu false. Sie können das dynamische Rendern von Seiten für dynamische Parameter, die nicht von generateStaticParams generiert wurden, durch manuelles Setzen von dynamicParams = true wieder aktivieren.
• 'force-static': Erzwingt statisches Rendering und cacht die Daten eines Layouts oder einer Seite, indem cookies(), headers() und useSearchParams() gezwungen werden, leere Werte zurückzugeben.

Wichtig zu wissen:

• Anleitungen zur Migration von getServerSideProps und getStaticProps zu dynamic: 'force-dynamic' und dynamic: 'error' finden Sie im Upgrade Guide.

dynamicParams

Steuert, was passiert, wenn ein dynamisches Segment aufgerufen wird, das nicht mit generateStaticParams generiert wurde.

export const dynamicParams = true // true | false,

export const dynamicParams = true // true | false,

• true (Standard): Dynamische Segmente, die nicht in generateStaticParams enthalten sind, werden bei Bedarf generiert.
• false: Dynamische Segmente, die nicht in generateStaticParams enthalten sind, geben einen 404-Fehler zurück.

Wichtig zu wissen:

• Diese Option ersetzt die fallback: true | false | blocking-Option von getStaticPaths im pages-Verzeichnis.
• Wenn dynamicParams = true, verwendet das Segment Streaming Server Rendering.
• Wenn dynamic = 'error' und dynamic = 'force-static' verwendet werden, wird der Standardwert von dynamicParams auf false geändert.

revalidate

Legt die standardmäßige Revalidierungszeit für ein Layout oder eine Seite fest. Diese Option überschreibt nicht den revalidate-Wert, der von einzelnen fetch-Anfragen festgelegt wird.

export const revalidate = false
// false | 'force-cache' | 0 | number

export const revalidate = false
// false | 'force-cache' | 0 | number

• false: (Standard) Die Standardheuristik, um alle fetch-Anfragen zu cachen, die ihre cache-Option auf 'force-cache' setzen oder entdeckt werden, bevor eine dynamische Funktion verwendet wird. Semantisch äquivalent zu revalidate: Infinity, was bedeutet, dass die Ressource praktisch unbegrenzt gecacht werden sollte. Es ist immer noch möglich, dass einzelne fetch-Anfragen cache: 'no-store' oder revalidate: 0 verwenden, um das Caching zu vermeiden und die Route dynamisch zu rendern. Oder setzen Sie revalidate auf eine positive Zahl, die niedriger ist als der Standardwert der Route, um die Revalidierungsfrequenz einer Route zu erhöhen.
• 0: Stellt sicher, dass ein Layout oder eine Seite immer dynamisch gerendert wird, auch wenn keine dynamischen Funktionen oder ungecachte Datenabrufe entdeckt werden. Diese Option ändert den Standardwert von fetch-Anfragen, die keine cache-Option auf 'no-store' setzen, lässt aber fetch-Anfragen, die 'force-cache' oder eine positive revalidate verwenden, unverändert.
• number: (in Sekunden) Legt die standardmäßige Revalidierungsfrequenz eines Layouts oder einer Seite auf n Sekunden fest.

Wichtig zu wissen: Die revalidate-Option ist nur verfügbar, wenn die Node.js Runtime verwendet wird. Das bedeutet, dass die Verwendung der revalidate-Option mit runtime = 'edge' nicht funktioniert.

Revalidierungsfrequenz

• Die niedrigste revalidate-Einstellung über alle Layouts und Seiten einer einzelnen Route bestimmt die Revalidierungsfrequenz der gesamten Route. Dies stellt sicher, dass untergeordnete Seiten so häufig revalidiert werden wie ihre übergeordneten Layouts.
• Einzelne fetch-Anfragen können eine niedrigere revalidate als die Standard-revalidate der Route festlegen, um die Revalidierungsfrequenz der gesamten Route zu erhöhen. Dies ermöglicht es Ihnen, dynamisch eine häufigere Revalidierung für bestimmte Routen basierend auf bestimmten Kriterien zu aktivieren.

fetchCache

export const fetchCache = 'auto'
// 'auto' | 'default-cache' | 'only-cache'
// 'force-cache' | 'force-no-store' | 'default-no-store' | 'only-no-store'

export const fetchCache = 'auto'
// 'auto' | 'default-cache' | 'only-cache'
// 'force-cache' | 'force-no-store' | 'default-no-store' | 'only-no-store'

runtime

export const runtime = 'nodejs'
// 'edge' | 'nodejs'

export const runtime = 'nodejs'
// 'edge' | 'nodejs'

• nodejs (Standard)
• edge

Erfahren Sie mehr über die Edge- und Node.js-Runtimes.

preferredRegion

export const preferredRegion = 'auto'
// 'auto' | 'global' | 'home' | ['iad1', 'sfo1']

export const preferredRegion = 'auto'
// 'auto' | 'global' | 'home' | ['iad1', 'sfo1']

Die Unterstützung für preferredRegion und die unterstützten Regionen hängt von Ihrer Deployment-Plattform ab.

Wichtig zu wissen:

• Wenn keine preferredRegion angegeben ist, erbt sie die Option des nächstgelegenen übergeordneten Layouts.
• Das Root-Layout verwendet standardmäßig all Regionen.

maxDuration

Abhängig von Ihrer Deployment-Plattform können Sie möglicherweise eine höhere Standard-Ausführungszeit für Ihre Funktion verwenden. Diese Einstellung ermöglicht es Ihnen, innerhalb der Grenzen Ihres Plans eine höhere Ausführungszeit zu aktivieren. Hinweis: Diese Einstellung erfordert Next.js 13.4.10 oder höher.

export const maxDuration = 5

export const maxDuration = 5

Wichtig zu wissen:

• Wenn keine maxDuration angegeben ist, hängt der Standardwert von Ihrer Deployment-Plattform und Ihrem Plan ab.

generateStaticParams

Die Funktion generateStaticParams kann in Kombination mit dynamischen Routensegmenten verwendet werden, um die Liste der Routensegmentparameter zu definieren, die zum Build-Zeitpunkt statisch generiert werden, anstatt bei Bedarf zur Laufzeit.

Weitere Details finden Sie in der API-Referenz.