Caché en Next.js

Next.js mejora el rendimiento de tu aplicación y reduce costos almacenando en caché el trabajo de renderizado y las solicitudes de datos. Esta página ofrece un análisis detallado de los mecanismos de caché de Next.js, las APIs que puedes usar para configurarlos y cómo interactúan entre sí.

Es bueno saberlo: Esta página te ayuda a entender cómo funciona Next.js internamente, pero no es conocimiento esencial para ser productivo con Next.js. La mayoría de las heurísticas de caché de Next.js están determinadas por tu uso de API y tienen valores predeterminados para el mejor rendimiento con configuración cero o mínima. Si prefieres ir directamente a ejemplos, empieza aquí.

Visión general

Aquí tienes una visión general de alto nivel de los diferentes mecanismos de caché y su propósito:

Por defecto, Next.js almacenará en caché tanto como sea posible para mejorar el rendimiento y reducir costos. Esto significa que las rutas se renderizan estáticamente y las solicitudes de datos se almacenan en caché a menos que decidas lo contrario. El diagrama a continuación muestra el comportamiento predeterminado de caché: cuando una ruta se renderiza estáticamente en tiempo de construcción y cuando se visita por primera vez una ruta estática.

El comportamiento de caché cambia dependiendo de si la ruta se renderiza estática o dinámicamente, si los datos están cacheados o no, y si una solicitud es parte de una visita inicial o una navegación posterior. Dependiendo de tu caso de uso, puedes configurar el comportamiento de caché para rutas individuales y solicitudes de datos.

Memoización de solicitudes

Next.js extiende la API fetch para memorizar automáticamente solicitudes que tienen la misma URL y opciones. Esto significa que puedes llamar a una función fetch para los mismos datos en múltiples lugares de un árbol de componentes React mientras solo se ejecuta una vez.

Por ejemplo, si necesitas usar los mismos datos a lo largo de una ruta (ej. en un Layout, Page y múltiples componentes), no tienes que obtener los datos en la parte superior del árbol y pasar props entre componentes. En su lugar, puedes obtener datos en los componentes que los necesitan sin preocuparte por las implicaciones de rendimiento de hacer múltiples solicitudes en la red para los mismos datos.

async function getItem() {
  // La función `fetch` se memoriza automáticamente y el resultado
  // se almacena en caché
  const res = await fetch('https://.../item/1')
  return res.json()
}

// Esta función se llama dos veces, pero solo se ejecuta la primera vez
const item = await getItem() // cache MISS

// La segunda llamada podría estar en cualquier parte de tu ruta
const item = await getItem() // cache HIT

async function getItem() {
  // La función `fetch` se memoriza automáticamente y el resultado
  // se almacena en caché
  const res = await fetch('https://.../item/1')
  return res.json()
}

// Esta función se llama dos veces, pero solo se ejecuta la primera vez
const item = await getItem() // cache MISS

// La segunda llamada podría estar en cualquier parte de tu ruta
const item = await getItem() // cache HIT

Cómo funciona la Memoización de Solicitudes

• Mientras se renderiza una ruta, la primera vez que se llama a una solicitud particular, su resultado no estará en memoria y será un MISS de caché.
• Por lo tanto, la función se ejecutará, los datos se obtendrán de la fuente externa y el resultado se almacenará en memoria.
• Las llamadas posteriores a la función de la solicitud en el mismo pase de renderizado serán un HIT de caché y los datos se devolverán desde la memoria sin ejecutar la función.
• Una vez que la ruta se ha renderizado y el pase de renderizado ha terminado, la memoria se "reinicia" y todas las entradas de memoización de solicitudes se borran.

Es bueno saberlo:

• La memoización de solicitudes es una característica de React, no de Next.js. Se incluye aquí para mostrar cómo interactúa con otros mecanismos de caché.
• La memoización solo se aplica al método GET en solicitudes fetch.
• La memoización solo se aplica al árbol de componentes React, esto significa:
  • Se aplica a solicitudes fetch en generateMetadata, generateStaticParams, Layouts, Pages y otros Server Components.
  • No se aplica a solicitudes fetch en Route Handlers ya que no son parte del árbol de componentes React.
• Para casos donde fetch no es adecuado (ej. algunos clientes de base de datos, CMS o GraphQL), puedes usar la función cache de React para memorizar funciones.

Duración

La caché dura el tiempo de vida de una solicitud del servidor hasta que el árbol de componentes React ha terminado de renderizarse.

Revalidación

Dado que la memoización no se comparte entre solicitudes del servidor y solo se aplica durante el renderizado, no hay necesidad de revalidarla.

Exclusión

La memoización solo se aplica al método GET en solicitudes fetch, otros métodos como POST y DELETE no se memorizan. Este comportamiento predeterminado es una optimización de React y no recomendamos excluirlo.

Para gestionar solicitudes individuales, puedes usar la propiedad signal de AbortController. Sin embargo, esto no excluirá las solicitudes de la memoización, sino que abortará las solicitudes en curso.

const { signal } = new AbortController()
fetch(url, { signal })

Caché de datos

Next.js tiene una Caché de datos integrada que persiste el resultado de las obtenciones de datos entre solicitudes del servidor y despliegues. Esto es posible porque Next.js extiende la API nativa fetch para permitir que cada solicitud en el servidor establezca su propia semántica de caché persistente.

Es bueno saberlo: En el navegador, la opción cache de fetch indica cómo una solicitud interactuará con la caché HTTP del navegador, en Next.js, la opción cache indica cómo una solicitud del lado del servidor interactuará con la Caché de datos del servidor.

Puedes usar las opciones cache y next.revalidate de fetch para configurar el comportamiento de caché.

Cómo funciona la Caché de datos

• La primera vez que se llama a una solicitud fetch con la opción 'force-cache' durante el renderizado, Next.js verifica la Caché de datos para una respuesta almacenada.
• Si se encuentra una respuesta almacenada, se devuelve inmediatamente y se memoriza.
• Si no se encuentra una respuesta almacenada, se realiza la solicitud a la fuente de datos, el resultado se almacena en la Caché de datos y se memoriza.
• Para datos no cacheados (ej. sin opción cache definida o usando { cache: 'no-store' }), el resultado siempre se obtiene de la fuente de datos y se memoriza.
• Ya sea que los datos estén cacheados o no, las solicitudes siempre se memorizan para evitar hacer solicitudes duplicadas para los mismos datos durante un pase de renderizado de React.

Diferencias entre la Caché de datos y la Memoización de solicitudes

Aunque ambos mecanismos de caché ayudan a mejorar el rendimiento reutilizando datos cacheados, la Caché de datos es persistente entre solicitudes entrantes y despliegues, mientras que la memoización solo dura el tiempo de vida de una solicitud.

Duración

La Caché de datos es persistente entre solicitudes entrantes y despliegues a menos que la revalides o la excluyas.

Revalidación

Los datos cacheados se pueden revalidar de dos maneras, con:

• Revalidación basada en tiempo: Revalidar datos después de que haya pasado cierta cantidad de tiempo y se haga una nueva solicitud. Esto es útil para datos que cambian con poca frecuencia y la frescura no es tan crítica.
• Revalidación bajo demanda: Revalidar datos basados en un evento (ej. envío de un formulario). La revalidación bajo demanda puede usar un enfoque basado en etiquetas o rutas para revalidar grupos de datos a la vez. Esto es útil cuando quieres asegurarte de que se muestren los datos más recientes lo antes posible (ej. cuando se actualiza contenido de tu CMS headless).

Revalidación basada en tiempo

Para revalidar datos en intervalos de tiempo, puedes usar la opción next.revalidate de fetch para establecer el tiempo de vida de un recurso en caché (en segundos).

// Revalidar como máximo cada hora
fetch('https://...', { next: { revalidate: 3600 } })

Alternativamente, puedes usar opciones de configuración de segmento de ruta para configurar todas las solicitudes fetch en un segmento o para casos donde no puedas usar fetch.

Cómo funciona la Revalidación basada en tiempo

• La primera vez que se llama a una solicitud fetch con revalidate, los datos se obtendrán de la fuente de datos externa y se almacenarán en la Caché de datos.
• Cualquier solicitud que se llame dentro del período de tiempo especificado (ej. 60 segundos) devolverá los datos cacheados.
• Después del período de tiempo, la siguiente solicitud aún devolverá los datos cacheados (ahora obsoletos).
  • Next.js activará una revalidación de los datos en segundo plano.
  • Una vez que los datos se obtengan exitosamente, Next.js actualizará la Caché de datos con los datos frescos.
  • Si la revalidación en segundo plano falla, se mantendrán los datos anteriores sin cambios.

Esto es similar al comportamiento stale-while-revalidate.

Revalidación bajo demanda

Los datos se pueden revalidar bajo demanda por ruta (revalidatePath) o por etiqueta de caché (revalidateTag).

Cómo funciona la Revalidación bajo demanda

• La primera vez que se llama a una solicitud fetch, los datos se obtendrán de la fuente de datos externa y se almacenarán en la Caché de datos.
• Cuando se activa una revalidación bajo demanda, las entradas de caché apropiadas se purgarán de la caché.
  • Esto es diferente de la revalidación basada en tiempo, que mantiene los datos obsoletos en la caché hasta que se obtienen los datos frescos.
• La próxima vez que se haga una solicitud, será un MISS de caché nuevamente, y los datos se obtendrán de la fuente de datos externa y se almacenarán en la Caché de datos.

Exclusión

Si no quieres almacenar en caché la respuesta de fetch, puedes hacer lo siguiente:

let data = await fetch('https://api.vercel.app/blog', { cache: 'no-store' })

Caché de ruta completa

Términos relacionados:

Puedes ver los términos Optimización Estática Automática, Generación de Sitios Estáticos o Renderizado Estático usados indistintamente para referirse al proceso de renderizar y almacenar en caché rutas de tu aplicación en tiempo de construcción.

Next.js renderiza y almacena en caché rutas automáticamente en tiempo de construcción. Esta es una optimización que te permite servir la ruta almacenada en caché en lugar de renderizar en el servidor para cada solicitud, lo que resulta en cargas de página más rápidas.

Para entender cómo funciona la Caché de ruta completa, es útil ver cómo React maneja el renderizado y cómo Next.js almacena en caché el resultado:

1. Renderizado de React en el servidor

En el servidor, Next.js usa las APIs de React para orquestar el renderizado. El trabajo de renderizado se divide en fragmentos: por segmentos de ruta individuales y límites de Suspense.

Cada fragmento se renderiza en dos pasos:

1. React renderiza Server Components en un formato de datos especial optimizado para streaming, llamado React Server Component Payload.
2. Next.js usa el React Server Component Payload y las instrucciones JavaScript de Client Components para renderizar HTML en el servidor.

Esto significa que no tenemos que esperar a que todo se renderice antes de almacenar en caché el trabajo o enviar una respuesta. En su lugar, podemos transmitir una respuesta a medida que se completa el trabajo.

¿Qué es el React Server Component Payload?

El React Server Component Payload es una representación binaria compacta del árbol de Server Components renderizados. React lo usa en el cliente para actualizar el DOM del navegador. El React Server Component Payload contiene:

• El resultado renderizado de Server Components
• Marcadores de posición para dónde se deben renderizar Client Components y referencias a sus archivos JavaScript
• Cualquier prop pasado de un Server Component a un Client Component

Para aprender más, consulta la documentación de Server Components.

2. Caché de Next.js en el servidor (Caché de ruta completa)

El comportamiento predeterminado de Next.js es almacenar en caché el resultado renderizado (React Server Component Payload y HTML) de una ruta en el servidor. Esto se aplica a rutas renderizadas estáticamente en tiempo de construcción o durante la revalidación.

3. Hidratación y reconciliación de React en el cliente

En el momento de la solicitud, en el cliente:

1. El HTML se usa para mostrar inmediatamente una vista previa rápida no interactiva inicial de los Client y Server Components.
2. El React Server Components Payload se usa para reconciliar los árboles de Client y Server Components renderizados y actualizar el DOM.
3. Las instrucciones JavaScript se usan para hidratar los Client Components y hacer que la aplicación sea interactiva.

4. Caché de Next.js en el cliente (Caché del enrutador)

El React Server Component Payload se almacena en la Caché del enrutador del lado del cliente - una caché en memoria separada, dividida por segmentos de ruta individuales. Esta Caché del enrutador se usa para mejorar la experiencia de navegación almacenando rutas visitadas previamente y prefetching de rutas futuras.

5. Navegaciones posteriores

En navegaciones posteriores o durante el prefetching, Next.js verificará si el React Server Components Payload está almacenado en la Caché del enrutador. Si es así, omitirá enviar una nueva solicitud al servidor.

Si los segmentos de ruta no están en la caché, Next.js obtendrá el React Server Components Payload del servidor y poblará la Caché del enrutador en el cliente.

Renderizado estático y dinámico

Si una ruta se almacena en caché o no en el momento de la compilación depende de si se renderiza estática o dinámicamente. Las rutas estáticas se almacenan en caché por defecto, mientras que las rutas dinámicas se renderizan en el momento de la solicitud y no se almacenan en caché.

Este diagrama muestra la diferencia entre rutas renderizadas estática y dinámicamente, con datos en caché y no almacenados en caché:

Aprende más sobre renderizado estático y dinámico.

Duración

Por defecto, la Caché de Ruta Completa es persistente. Esto significa que el resultado del renderizado se almacena en caché entre solicitudes de usuarios.

Invalidación

Hay dos formas de invalidar la Caché de Ruta Completa:

• Revalidando datos: Revalidar la Caché de Datos invalidará a su vez la Caché del Router al volver a renderizar componentes en el servidor y almacenar en caché el nuevo resultado del renderizado.
• Reimplementación: A diferencia de la Caché de Datos, que persiste entre implementaciones, la Caché de Ruta Completa se borra en nuevas implementaciones.

Opción de exclusión

Puedes optar por no usar la Caché de Ruta Completa, o en otras palabras, renderizar componentes dinámicamente para cada solicitud entrante, mediante:

• Usando una API Dinámica: Esto excluirá la ruta de la Caché de Ruta Completa y la renderizará dinámicamente en el momento de la solicitud. La Caché de Datos aún puede usarse.
• Usando las opciones de configuración de segmento de ruta dynamic = 'force-dynamic' o revalidate = 0: Esto omitirá la Caché de Ruta Completa y la Caché de Datos. Esto significa que los componentes se renderizarán y los datos se obtendrán en cada solicitud entrante al servidor. La Caché del Router seguirá aplicándose ya que es una caché del lado del cliente.
• Excluyéndose de la Caché de Datos: Si una ruta tiene una solicitud fetch que no se almacena en caché, esto excluirá la ruta de la Caché de Ruta Completa. Los datos para la solicitud fetch específica se obtendrán para cada solicitud entrante. Otras solicitudes fetch que no opten por excluirse del almacenamiento en caché seguirán almacenándose en la Caché de Datos. Esto permite una combinación de datos almacenados en caché y no almacenados en caché.

Caché del Router en el cliente

Next.js tiene una caché del router en memoria en el cliente que almacena el payload RSC de segmentos de ruta, divididos por diseños, estados de carga y páginas.

Cuando un usuario navega entre rutas, Next.js almacena en caché los segmentos de ruta visitados y precarga las rutas a las que es probable que el usuario navegue. Esto resulta en una navegación instantánea hacia atrás/adelante, sin recarga completa de la página entre navegaciones, y preservación del estado de React y del estado del navegador.

Con la Caché del Router:

• Diseños se almacenan en caché y se reutilizan en la navegación (renderizado parcial).
• Estados de carga se almacenan en caché y se reutilizan en la navegación para navegación instantánea.
• Páginas no se almacenan en caché por defecto, pero se reutilizan durante la navegación hacia atrás y adelante en el navegador. Puedes habilitar el almacenamiento en caché para segmentos de página usando la opción experimental staleTimes.

Es bueno saber: Esta caché se aplica específicamente a Next.js y a Componentes del Servidor, y es diferente a la bfcache del navegador, aunque tiene un resultado similar.

Duración

La caché se almacena en la memoria temporal del navegador. Dos factores determinan cuánto dura la caché del router:

• Sesión: La caché persiste entre navegaciones. Sin embargo, se borra al refrescar la página.
• Período de invalidación automática: La caché de diseños y estados de carga se invalida automáticamente después de un tiempo específico. La duración depende de cómo se precargó el recurso y si el recurso fue generado estáticamente:
  • Precarga por defecto (prefetch={null} o no especificado): no se almacena en caché para páginas dinámicas, 5 minutos para páginas estáticas.
  • Precarga completa (prefetch={true} o router.prefetch): 5 minutos para páginas estáticas y dinámicas.

Mientras que un refresco de página borrará todos los segmentos almacenados en caché, el período de invalidación automática solo afecta al segmento individual desde el momento en que se precargó.

Es bueno saber: La opción experimental staleTimes se puede usar para ajustar los tiempos de invalidación automática mencionados anteriormente.

Invalidación

Hay dos formas de invalidar la Caché del Router:

• En una Acción del Servidor:
  • Revalidando datos bajo demanda por ruta con (revalidatePath) o por etiqueta de caché con (revalidateTag)
  • Usando cookies.set o cookies.delete invalida la Caché del Router para evitar que las rutas que usan cookies se vuelvan obsoletas (por ejemplo, autenticación).
• Llamando a router.refresh invalidará la Caché del Router y hará una nueva solicitud al servidor para la ruta actual.

Opción de exclusión

A partir de Next.js 15, los segmentos de página están excluidos por defecto.

Es bueno saber: También puedes excluirte de la precarga estableciendo la propiedad prefetch del componente <Link> en false.

Interacciones entre cachés

Al configurar los diferentes mecanismos de caché, es importante entender cómo interactúan entre sí:

Caché de Datos y Caché de Ruta Completa

• Revalidar o excluirse de la Caché de Datos invalidará la Caché de Ruta Completa, ya que el resultado del renderizado depende de los datos.
• Invalidar o excluirse de la Caché de Ruta Completa no afecta la Caché de Datos. Puedes renderizar dinámicamente una ruta que tenga tanto datos almacenados en caché como no almacenados en caché. Esto es útil cuando la mayor parte de tu página usa datos almacenados en caché, pero tienes algunos componentes que dependen de datos que deben obtenerse en el momento de la solicitud. Puedes renderizar dinámicamente sin preocuparte por el impacto en el rendimiento de volver a obtener todos los datos.

Caché de Datos y Caché del Router en el cliente

• Para invalidar inmediatamente la Caché de Datos y la Caché del Router, puedes usar revalidatePath o revalidateTag en una Acción del Servidor.
• Revalidar la Caché de Datos en un Manejador de Ruta no invalidará inmediatamente la Caché del Router ya que el Manejador de Ruta no está vinculado a una ruta específica. Esto significa que la Caché del Router seguirá sirviendo el payload anterior hasta que se realice un refresco completo o haya transcurrido el período de invalidación automática.

APIs

La siguiente tabla proporciona una visión general de cómo diferentes APIs de Next.js afectan al almacenamiento en caché:

<Link>

Por defecto, el componente <Link> precarga automáticamente rutas de la Caché de Ruta Completa y agrega el Payload del Componente del Servidor React a la Caché del Router.

Para deshabilitar la precarga, puedes establecer la propiedad prefetch en false. Pero esto no omitirá la caché permanentemente, el segmento de ruta aún se almacenará en caché en el cliente cuando el usuario visite la ruta.

Aprende más sobre el componente <Link>.

router.prefetch

La opción prefetch del hook useRouter se puede usar para precargar manualmente una ruta. Esto agrega el Payload del Componente del Servidor React a la Caché del Router.

Consulta la referencia de la API del hook useRouter.

router.refresh

La opción refresh del hook useRouter se puede usar para actualizar manualmente una ruta. Esto borra completamente la Caché del Router y hace una nueva solicitud al servidor para la ruta actual. refresh no afecta la Caché de Datos ni la Caché de Ruta Completa.

El resultado renderizado se reconciliará en el cliente mientras se preserva el estado de React y el estado del navegador.

Consulta la referencia de la API del hook useRouter.

fetch

Los datos devueltos por fetch no se almacenan automáticamente en la Caché de Datos.

El comportamiento predeterminado de almacenamiento en caché de fetch (por ejemplo, cuando no se especifica la opción cache) es igual a establecer la opción cache en no-store:

let data = await fetch('https://api.vercel.app/blog', { cache: 'no-store' })

Consulta la Referencia de la API de fetch para más opciones.

fetch options.cache

Puedes optar por almacenar en caché individualmente con fetch estableciendo la opción cache en force-cache:

// Optar por almacenar en caché
fetch(`https://...`, { cache: 'force-cache' })

Consulta la Referencia de la API de fetch para más opciones.

fetch options.next.revalidate

Puedes usar la opción next.revalidate de fetch para establecer el período de revalidación (en segundos) de una solicitud fetch individual. Esto revalidará la Caché de Datos, que a su vez revalidará la Caché de Ruta Completa. Se obtendrán datos frescos y los componentes se volverán a renderizar en el servidor.

// Revalidar como máximo después de 1 hora
fetch(`https://...`, { next: { revalidate: 3600 } })

Consulta la referencia de la API de fetch para más opciones.

fetch options.next.tags y revalidateTag

Next.js tiene un sistema de etiquetado de caché para un almacenamiento y revalidación de datos de grano fino.

1. Al usar fetch o unstable_cache, tienes la opción de etiquetar entradas de caché con una o más etiquetas.
2. Luego, puedes llamar a revalidateTag para purgar las entradas de caché asociadas con esa etiqueta.

Por ejemplo, puedes establecer una etiqueta al obtener datos:

// Almacenar datos con una etiqueta
fetch(`https://...`, { next: { tags: ['a', 'b', 'c'] } })

Luego, llama a revalidateTag con una etiqueta para purgar la entrada de caché:

// Revalidar entradas con una etiqueta específica
revalidateTag('a')

Hay dos lugares donde puedes usar revalidateTag, dependiendo de lo que quieras lograr:

1. Manejadores de Ruta - para revalidar datos en respuesta a un evento de terceros (por ejemplo, webhook). Esto no invalidará inmediatamente la Caché del Router ya que el Manejador de Ruta no está vinculado a una ruta específica.
2. Acciones del Servidor - para revalidar datos después de una acción del usuario (por ejemplo, envío de formulario). Esto invalidará la Caché del Router para la ruta asociada.

revalidatePath

revalidatePath te permite revalidar manualmente datos y volver a renderizar los segmentos de ruta debajo de una ruta específica en una sola operación. Llamar al método revalidatePath revalida la Caché de Datos, que a su vez invalida la Caché de Ruta Completa.

revalidatePath('/')

Hay dos lugares donde puedes usar revalidatePath, dependiendo de lo que quieras lograr:

1. Manejadores de Ruta - para revalidar datos en respuesta a un evento de terceros (por ejemplo, webhook).
2. Acciones del Servidor - para revalidar datos después de una interacción del usuario (por ejemplo, envío de formulario, hacer clic en un botón).

Consulta la referencia de la API de revalidatePath para más información.

revalidatePath vs. router.refresh:

Llamar a router.refresh borrará la Caché del Router y volverá a renderizar segmentos de ruta en el servidor sin invalidar la Caché de Datos ni la Caché de Ruta Completa.

La diferencia es que revalidatePath purga la Caché de Datos y la Caché de Ruta Completa, mientras que router.refresh() no cambia la Caché de Datos ni la Caché de Ruta Completa, ya que es una API del lado del cliente.

APIs Dinámicas

Las APIs dinámicas como cookies y headers, y la propiedad searchParams en Páginas dependen de información de solicitud entrante en tiempo de ejecución. Usarlas excluirá una ruta de la Caché de Ruta Completa, en otras palabras, la ruta se renderizará dinámicamente.

cookies

Usar cookies.set o cookies.delete en una Acción del Servidor invalida la Caché del Router para evitar que las rutas que usan cookies se vuelvan obsoletas (por ejemplo, para reflejar cambios de autenticación).

Consulta la referencia de la API de cookies.

Opciones de Configuración de Segmentos

Las opciones de Configuración de Segmentos de Ruta pueden utilizarse para sobrescribir los valores predeterminados del segmento de ruta o cuando no es posible usar la API fetch (por ejemplo, con clientes de bases de datos o bibliotecas de terceros).

Las siguientes opciones de Configuración de Segmentos de Ruta excluirán la ruta de la Caché de Ruta Completa:

• const dynamic = 'force-dynamic'

Esta opción de configuración excluirá todas las solicitudes fetch de la Caché de Datos (es decir, no-store):

• const fetchCache = 'default-no-store'

Consulte fetchCache para ver opciones más avanzadas.

Vea la documentación de Configuración de Segmentos de Ruta para más opciones.

generateStaticParams

Para segmentos dinámicos (por ejemplo, app/blog/[slug]/page.js), las rutas proporcionadas por generateStaticParams se almacenan en la Caché de Ruta Completa durante el tiempo de compilación. En el momento de la solicitud, Next.js también almacenará en caché las rutas que no se conocían en el momento de la compilación la primera vez que se visitan.

Para renderizar estáticamente todas las rutas en el momento de compilación, proporcione la lista completa de rutas a generateStaticParams:

export async function generateStaticParams() {
  const posts = await fetch('https://.../posts').then((res) => res.json())

  return posts.map((post) => ({
    slug: post.slug,
  }))
}

Para renderizar estáticamente un subconjunto de rutas en el momento de compilación y el resto la primera vez que se visitan en tiempo de ejecución, devuelva una lista parcial de rutas:

export async function generateStaticParams() {
  const posts = await fetch('https://.../posts').then((res) => res.json())

  // Renderiza los primeros 10 posts en tiempo de compilación
  return posts.slice(0, 10).map((post) => ({
    slug: post.slug,
  }))
}

Para renderizar estáticamente todas las rutas la primera vez que se visitan, devuelva un array vacío (no se renderizarán rutas en el momento de compilación) o utilice export const dynamic = 'force-static':

export async function generateStaticParams() {
  return []
}

Importante: Debe devolver un array desde generateStaticParams, incluso si está vacío. De lo contrario, la ruta se renderizará dinámicamente.

export const dynamic = 'force-static'

Para deshabilitar el almacenamiento en caché en el momento de la solicitud, agregue la opción export const dynamicParams = false en un segmento de ruta. Cuando se usa esta opción de configuración, solo se servirán las rutas proporcionadas por generateStaticParams, y otras rutas devolverán 404 o coincidirán (en el caso de rutas catch-all).

Función cache de React

La función cache de React permite memorizar el valor de retorno de una función, lo que permite llamar a la misma función múltiples veces mientras solo se ejecuta una vez.

Dado que las solicitudes fetch se memorizan automáticamente, no es necesario envolverlas en cache de React. Sin embargo, puede usar cache para memorizar manualmente solicitudes de datos en casos donde la API fetch no sea adecuada. Por ejemplo, con algunos clientes de bases de datos, CMS o clientes GraphQL.

import { cache } from 'react'
import db from '@/lib/db'

export const getItem = cache(async (id: string) => {
  const item = await db.item.findUnique({ id })
  return item
})

import { cache } from 'react'
import db from '@/lib/db'

export const getItem = cache(async (id) => {
  const item = await db.item.findUnique({ id })
  return item
})