Configuración de Segmento de Ruta

Las opciones descritas en esta página se deshabilitan si la bandera dynamicIO está activa, y eventualmente serán obsoletas en el futuro.

Las opciones de Segmento de Ruta permiten configurar el comportamiento de una Página, Layout o Manejador de Ruta exportando directamente las siguientes variables:

Opciones

experimental_ppr

Habilita el Renderizado Parcial (PPR) para un layout o página.

export const experimental_ppr = true
// true | false

export const experimental_ppr = true
// true | false

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'

Importante: El nuevo modelo en el directorio app favorece el control granular del almacenamiento en 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, lo que hará que las rutas se rendericen para cada usuario en el momento de la solicitud. Esta opción es equivalente a:
  • 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 APIs Dinámicas 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' }.
  • Establecer la configuración del segmento a fetchCache = 'only-cache', dynamicParams = false.
  • dynamic = 'error' cambia el valor predeterminado de dynamicParams de true a false. Puede optar por volver a renderizar páginas dinámicamente para parámetros 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 forzando a cookies, headers() y useSearchParams() a devolver valores vacíos. Es posible usar revalidate, revalidatePath o revalidateTag en páginas o layouts renderizados con force-static.

Importante:

• Las instrucciones sobre cómo migrar desde getServerSideProps y getStaticProps a dynamic: 'force-dynamic' y dynamic: 'error' se pueden encontrar 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 404.

Importante:

• Esta opción reemplaza la opción fallback: true | false | blocking de getStaticPaths en el directorio pages.
• Para renderizar estáticamente todas las rutas la primera vez que se visitan, deberá devolver un array vacío en generateStaticParams o utilizar export const dynamic = 'force-static'.
• Cuando dynamicParams = true, el segmento utiliza Renderizado de Servidor con Streaming.

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 API Dinámica. Semánticamente equivalente a revalidate: Infinity, lo que significa que el recurso debe almacenarse en caché indefinidamente. Aún 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 valor 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 APIs Dinámicas o solicitudes 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.

Importante:

• El valor de revalidación debe ser estáticamente analizable. Por ejemplo, revalidate = 600 es válido, pero revalidate = 60 * 10 no lo es.
• El valor de revalidación no está disponible cuando se usa runtime = 'edge'.
• En Desarrollo, las páginas siempre se renderizan bajo demanda y nunca se almacenan en caché. Esto permite ver los cambios inmediatamente sin esperar a que pase un período de revalidación.

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 valor predeterminado de la ruta para aumentar la frecuencia de revalidación de toda la ruta. Esto 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

Recomendamos usar el runtime de Node.js para renderizar su aplicación y el runtime Edge para Middleware.

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

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

• 'nodejs' (por defecto)
• 'edge'

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 su 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.

maxDuration

Por defecto, Next.js no limita la ejecución de 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.

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

export const maxDuration = 5

export const maxDuration = 5

Importante:

• Si usa Acciones de Servidor, establezca 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 compilación en lugar de bajo demanda en el momento de la solicitud.

Consulte la referencia de API para más detalles.

Historial de Versiones