Configuration des segments de route

Les options de segment de route vous permettent de configurer le comportement d'une Page, d'un Layout ou d'un Gestionnaire de route (Route Handler) en exportant directement les variables suivantes :

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() {}

Bon à savoir :

• Les valeurs des options de configuration doivent actuellement être analysables statiquement. Par exemple, revalidate = 600 est valide, mais revalidate = 60 * 10 ne l'est pas.

Options

dynamic

Modifie le comportement dynamique d'un layout ou d'une page pour les rendre entièrement statiques ou entièrement dynamiques.

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

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

Bon à savoir : Le nouveau modèle dans le répertoire app favorise un contrôle granulaire du cache au niveau des requêtes fetch plutôt que le modèle binaire tout ou rien de getServerSideProps et getStaticProps au niveau de la page dans le répertoire pages. L'option dynamic permet de revenir à l'ancien modèle pour faciliter la migration.

• 'auto' (par défaut) : Option par défaut pour mettre en cache autant que possible sans empêcher les composants d'opter pour un comportement dynamique.
• 'force-dynamic' : Force le rendu dynamique et la récupération de données non mises en cache d'un layout ou d'une page en désactivant toute mise en cache des requêtes fetch et en revalidant toujours. Cette option est équivalente à :
  • getServerSideProps() dans le répertoire pages.
  • Définir l'option de chaque requête fetch() dans un layout ou une page à { cache: 'no-store', next: { revalidate: 0 } }.
  • Définir la configuration du segment à export const fetchCache = 'force-no-store'.
• 'error' : Force le rendu statique et la mise en cache des données d'un layout ou d'une page en provoquant une erreur si des composants utilisent des fonctions dynamiques ou des données non mises en cache. Cette option est équivalente à :
  • getStaticProps() dans le répertoire pages.
  • Définir l'option de chaque requête fetch() dans un layout ou une page à { cache: 'force-cache' }.
  • Définir la configuration du segment à fetchCache = 'only-cache', dynamicParams = false.
  • dynamic = 'error' change la valeur par défaut de dynamicParams de true à false. Vous pouvez revenir à un rendu dynamique des pages pour les paramètres dynamiques non générés par generateStaticParams en définissant manuellement dynamicParams = true.
• 'force-static' : Force le rendu statique et la mise en cache des données d'un layout ou d'une page en forçant cookies(), headers() et useSearchParams() à retourner des valeurs vides.

Bon à savoir :

• Des instructions sur comment migrer depuis getServerSideProps et getStaticProps vers dynamic: 'force-dynamic' et dynamic: 'error' peuvent être trouvées dans le guide de mise à niveau.

dynamicParams

Contrôle ce qui se passe lorsqu'un segment dynamique est visité et n'a pas été généré avec generateStaticParams.

export const dynamicParams = true // true | false,

export const dynamicParams = true // true | false,

• true (par défaut) : Les segments dynamiques non inclus dans generateStaticParams sont générés à la demande.
• false : Les segments dynamiques non inclus dans generateStaticParams retourneront une erreur 404.

Bon à savoir :

• Cette option remplace l'option fallback: true | false | blocking de getStaticPaths dans le répertoire pages.
• Lorsque dynamicParams = true, le segment utilise le Streaming Server Rendering (Rendu côté serveur en flux).
• Si dynamic = 'error' et dynamic = 'force-static' sont utilisés, la valeur par défaut de dynamicParams sera changée à false.

revalidate

Définit le temps de revalidation par défaut pour un layout ou une page. Cette option ne remplace pas la valeur revalidate définie par des requêtes fetch individuelles.

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

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

• false : (par défaut) L'heuristique par défaut pour mettre en cache toutes les requêtes fetch qui définissent leur option cache à 'force-cache' ou qui sont découvertes avant qu'une fonction dynamique soit utilisée. Sémantiquement équivalent à revalidate: Infinity, ce qui signifie que la ressource devrait être mise en cache indéfiniment. Il est toujours possible pour des requêtes fetch individuelles d'utiliser cache: 'no-store' ou revalidate: 0 pour éviter d'être mises en cache et rendre la route dynamiquement. Ou de définir revalidate à un nombre positif inférieur à la valeur par défaut de la route pour augmenter la fréquence de revalidation.
• 0 : Garantit qu'un layout ou une page est toujours rendu dynamiquement, même si aucune fonction dynamique ou récupération de données non mise en cache n'est détectée. Cette option change la valeur par défaut des requêtes fetch qui ne définissent pas d'option cache à 'no-store' mais laisse les requêtes fetch qui optent pour 'force-cache' ou utilisent un revalidate positif inchangées.
• number : (en secondes) Définit la fréquence de revalidation par défaut d'un layout ou d'une page à n secondes.

Bon à savoir : L'option revalidate n'est disponible que lors de l'utilisation du Runtime Node.js. Cela signifie que l'utilisation de l'option revalidate avec runtime = 'edge' ne fonctionnera pas.

Fréquence de revalidation

• La valeur revalidate la plus basse parmi chaque layout et page d'une seule route déterminera la fréquence de revalidation de la route entière. Cela garantit que les pages enfants sont revalidées aussi fréquemment que leurs layouts parents.
• Les requêtes fetch individuelles peuvent définir une valeur revalidate inférieure à la valeur par défaut de la route pour augmenter la fréquence de revalidation de la route entière. Cela vous permet d'opter dynamiquement pour une revalidation plus fréquente pour certaines routes en fonction de certains critères.

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 (par défaut)
• edge

Apprenez-en plus sur les runtimes Edge et Node.js.

preferredRegion

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

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

La prise en charge de preferredRegion et des régions supportées dépend de votre plateforme de déploiement.

Bon à savoir :

• Si preferredRegion n'est pas spécifié, il héritera de l'option du layout parent le plus proche.
• Le layout racine est par défaut défini à toutes les régions (all).

maxDuration

Selon votre plateforme de déploiement, vous pourriez utiliser un temps d'exécution par défaut plus élevé pour votre fonction. Ce paramètre vous permet d'opter pour un temps d'exécution plus élevé dans les limites de votre plan. Note : Ce paramètre nécessite Next.js 13.4.10 ou supérieur.

export const maxDuration = 5

export const maxDuration = 5

Bon à savoir :

• Si maxDuration n'est pas spécifié, la valeur par défaut dépend de votre plateforme de déploiement et de votre plan.

generateStaticParams

La fonction generateStaticParams peut être utilisée en combinaison avec des segments de route dynamiques pour définir la liste des paramètres de segment de route qui seront générés statiquement au moment de la construction plutôt qu'à la demande au moment de la requête.

Voir la référence API pour plus de détails.