Configuración de Segmentos de Ruta

Las opciones descritas en esta página se desactivan si la bandera dynamicIO está activa, y eventualmente quedará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

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'

Nota 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 en 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 en fetchCache = 'only-cache', dynamicParams = false.
  • dynamic = 'error' cambia el valor predeterminado de dynamicParams de true a false. Puede volver a habilitar 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 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.

Nota 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,

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

Nota 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

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

Nota 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 la ruta completa. Esto asegura que las páginas secundarias se revaliden con la misma frecuencia que sus layouts principales.
• Las solicitudes fetch individuales pueden establecer un valor revalidate más bajo que el 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'

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'

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

preferredRegion

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

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

Nota 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

Nota 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 utilizadas 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.

Consulte la referencia de API para más detalles.

Historial de Versiones