Configuración de Segmentos de Ruta

Las opciones de segmentos de ruta te permiten configurar el comportamiento de una Página, Layout o Manejador de Ruta (Route Handler) exportando directamente las siguientes variables:

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

Importante:

• Los valores de las opciones de configuración actualmente deben ser estáticamente analizables. Por ejemplo, revalidate = 600 es válido, pero revalidate = 60 * 10 no lo es.

Opciones

dynamic

Cambia el comportamiento dinámico de un layout o página para que sea completamente estático o completamente dinámico.

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

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

Importante: El nuevo modelo en el directorio app favorece el control granular del almacenamiento en caché (caching) a nivel de solicitud fetch sobre el modelo binario de todo o nada de getServerSideProps y getStaticProps a nivel de página en el directorio pages. La opción dynamic es una forma de volver al modelo anterior como conveniencia y proporciona una ruta de migración más simple.

• 'auto' (predeterminado): La opción predeterminada para almacenar en caché tanto como sea posible sin impedir que ningún componente opte por un comportamiento dinámico.
• 'force-dynamic': Fuerza el renderizado dinámico y la obtención de datos sin caché de un layout o página deshabilitando todo almacenamiento en caché de solicitudes fetch y siempre revalidando. Esta opción es equivalente a:
  • getServerSideProps() en el directorio pages.
  • Establecer la opción de cada solicitud fetch() en un layout o página a { cache: 'no-store', next: { revalidate: 0 } }.
  • Establecer la configuración del segmento a export const fetchCache = 'force-no-store'
• 'error': Fuerza el renderizado estático y almacena en caché los datos de un layout o página causando un error si algún componente usa funciones dinámicas o datos sin caché. Esta opción es equivalente a:
  • getStaticProps() en el directorio pages.
  • Establecer la opción de cada solicitud fetch() en un layout o página a { cache: 'force-cache' }.
  • Establecer la configuración del segmento a fetchCache = 'only-cache', dynamicParams = false.
  • dynamic = 'error' cambia el valor predeterminado de dynamicParams de true a false. Puedes volver a activar el renderizado dinámico para parámetros dinámicos no generados por generateStaticParams estableciendo manualmente dynamicParams = true.
• 'force-static': Fuerza el renderizado estático y almacena en caché los datos de un layout o página obligando a cookies(), headers() y useSearchParams() a devolver valores vacíos.

Importante:

• Puedes encontrar instrucciones sobre cómo migrar desde getServerSideProps y getStaticProps a dynamic: 'force-dynamic' y dynamic: 'error' en la guía de actualización.

dynamicParams

Controla qué sucede cuando se visita un segmento dinámico que no fue generado con generateStaticParams.

export const dynamicParams = true // true | false,

export const dynamicParams = true // true | false,

• true (predeterminado): Los segmentos dinámicos no incluidos en generateStaticParams se generan bajo demanda.
• false: Los segmentos dinámicos no incluidos en generateStaticParams devolverán un error 404.

Importante:

• Esta opción reemplaza la opción fallback: true | false | blocking de getStaticPaths en el directorio pages.
• Cuando dynamicParams = true, el segmento usa Renderizado del lado del servidor con Streaming (Streaming Server Rendering).
• Si se usan dynamic = 'error' y dynamic = 'force-static', cambiarán el valor predeterminado de dynamicParams a false.

revalidate

Establece el tiempo de revalidación predeterminado para un layout o página. Esta opción no anula el valor revalidate establecido por solicitudes fetch individuales.

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

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

• false: (predeterminado) La heurística predeterminada para almacenar en caché cualquier solicitud fetch que establezca su opción cache en 'force-cache' o que se descubra antes de usar una función dinámica. Semánticamente equivalente a revalidate: Infinity, lo que significa que el recurso debe almacenarse en caché indefinidamente. Todavía es posible que solicitudes fetch individuales usen cache: 'no-store' o revalidate: 0 para evitar el almacenamiento en caché y hacer que la ruta se renderice dinámicamente. O establecer revalidate en un número positivo menor que el predeterminado de la ruta para aumentar la frecuencia de revalidación.
• 0: Asegura que un layout o página siempre se renderice dinámicamente, incluso si no se descubren funciones dinámicas o obtención de datos sin caché. Esta opción cambia el valor predeterminado de las solicitudes fetch que no establecen una opción cache a 'no-store', pero deja las solicitudes fetch que optan por 'force-cache' o usan un revalidate positivo como están.
• number: (en segundos) Establece la frecuencia de revalidación predeterminada de un layout o página a n segundos.

Importante: La opción revalidate solo está disponible cuando se usa el Runtime de Node.js. Esto significa que usar la opción revalidate con runtime = 'edge' no funcionará.

Frecuencia de Revalidación

• El valor más bajo de revalidate en cada layout y página de una sola ruta determinará la frecuencia de revalidación de toda la ruta. Esto asegura que las páginas secundarias se revaliden con la misma frecuencia que sus layouts padres.
• Las solicitudes fetch individuales pueden establecer un revalidate más bajo que el revalidate predeterminado de la ruta para aumentar la frecuencia de revalidación de toda la ruta. Esto te permite optar dinámicamente por una revalidación más frecuente para ciertas rutas según algunos criterios.

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 (predeterminado)
• edge

Aprende más sobre los Runtimes Edge y Node.js.

preferredRegion

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

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

El soporte para preferredRegion y las regiones admitidas depende de tu plataforma de despliegue.

Importante:

• Si no se especifica un preferredRegion, heredará la opción del layout padre más cercano.
• El layout raíz tiene como valor predeterminado todas las regiones (all).

maxDuration

Según tu plataforma de despliegue, es posible que puedas usar un tiempo de ejecución predeterminado más alto para tu función. Esta configuración te permite optar por un tiempo de ejecución más alto dentro de los límites de tu plan. Nota: Esta configuración requiere Next.js 13.4.10 o superior.

export const maxDuration = 5

export const maxDuration = 5

Importante:

• Si no se especifica un maxDuration, el valor predeterminado depende de tu plataforma de despliegue y plan.

generateStaticParams

La función generateStaticParams se puede usar en combinación con segmentos de ruta dinámicos para definir la lista de parámetros de segmento de ruta que se generarán estáticamente en tiempo de compilación en lugar de bajo demanda en tiempo de solicitud.

Consulta la referencia de API para más detalles.