Configuración de Segmentos de Ruta

Las opciones de Segmento 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() {}

Es bueno saber:

• 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 a 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'

Es bueno saber: El nuevo modelo en el directorio app favorece el control granular del caché 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' (por defecto): 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 (dynamic rendering), lo que hará que las rutas se rendericen para cada usuario en el momento de la solicitud. Esta opción es equivalente a getServerSideProps() en el directorio pages.

• '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 (dynamic functions) o datos no almacenados en 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' }.
  • Configurar el segmento con fetchCache = 'only-cache', dynamicParams = false.
  • dynamic = 'error' cambia el valor por defecto de dynamicParams de true a false. Puedes volver a habilitar el renderizado dinámico para parámetros dinámicos no generados por generateStaticParams configurando manualmente dynamicParams = true.

• 'force-static': Fuerza el renderizado estático y almacena en caché los datos de un layout o página haciendo que cookies(), headers() y useSearchParams() devuelvan valores vacíos.

Es bueno saber:

• 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 (por defecto): 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.

Es bueno saber:

• Esta opción reemplaza la opción fallback: true | false | blocking de getStaticPaths en el directorio pages.
• Cuando dynamicParams = true, el segmento utiliza Renderizado de Servidor con Streaming (Streaming Server Rendering).
• Si se usan dynamic = 'error' y dynamic = 'force-static', cambiarán el valor por defecto 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 | 0 | number

export const revalidate = false
// false | 0 | number

• false (por defecto): 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 (dynamic function). 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 (dynamically rendered), incluso si no se descubren funciones dinámicas o recuperaciones de datos no almacenadas en 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.

Es bueno saber: 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 principales.
• 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'
// 'nodejs' | 'edge'

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

• 'nodejs' (por defecto)
• '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.

Es bueno saber:

• 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

Por defecto, Next.js no limita la ejecución de la lógica del lado del servidor (renderizar una página o manejar una API). Las plataformas de despliegue pueden usar maxDuration de la salida de compilación de Next.js para agregar límites de ejecución específicos. Por ejemplo, en Vercel.

Nota: Esta configuración requiere Next.js 13.4.10 o superior.

export const maxDuration = 5

export const maxDuration = 5

Es bueno saber:

• Si usas Acciones de Servidor (Server Actions), establece maxDuration a nivel de página para cambiar el tiempo de espera predeterminado de todas las Acciones de Servidor usadas en la página.

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 el momento de la compilación en lugar de bajo demanda en el momento de la solicitud.

Consulta la referencia de API para más detalles.