fetch

Next.js extiende la API Web fetch() para permitir que cada solicitud en el servidor establezca su propia semántica de almacenamiento en caché persistente y revalidación.

En el navegador, la opción cache indica cómo una solicitud fetch interactuará con la caché HTTP del navegador. Con esta extensión, cache indica cómo una solicitud fetch del lado del servidor interactuará con la Caché de Datos persistente del framework.

Puedes llamar a fetch con async y await directamente dentro de Componentes del Servidor.

export default async function Page() {
  let data = await fetch('https://api.vercel.app/blog')
  let posts = await data.json()
  return (
    <ul>
      {posts.map((post) => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  )
}

fetch(url, options)

Dado que Next.js extiende la API Web fetch(), puedes usar cualquiera de las opciones nativas disponibles.

options.cache

Configura cómo la solicitud debe interactuar con la Caché de Datos de Next.js.

fetch(`https://...`, { cache: 'force-cache' | 'no-store' })

• auto no cache (predeterminado): Next.js obtiene el recurso del servidor remoto en cada solicitud durante el desarrollo, pero lo obtendrá una vez durante next build porque la ruta se prerenderizará estáticamente. Si se detectan APIs Dinámicas en la ruta, Next.js obtendrá el recurso en cada solicitud.
• no-store: Next.js obtiene el recurso del servidor remoto en cada solicitud, incluso si no se detectan APIs Dinámicas en la ruta.
• force-cache: Next.js busca una solicitud coincidente en su Caché de Datos.
  • Si hay una coincidencia y está fresca, se devolverá desde la caché.
  • Si no hay coincidencia o es una coincidencia obsoleta, Next.js obtendrá el recurso del servidor remoto y actualizará la caché con el recurso descargado.

options.next.revalidate

fetch(`https://...`, { next: { revalidate: false | 0 | number } })

Establece el tiempo de vida de la caché de un recurso (en segundos).

• false - Almacena el recurso en caché indefinidamente. Semánticamente equivalente a revalidate: Infinity. La caché HTTP puede eliminar recursos antiguos con el tiempo.
• 0 - Evita que el recurso se almacene en caché.
• number - (en segundos) Especifica que el recurso debe tener un tiempo de vida en caché de como máximo n segundos.

Importante:

• Si una solicitud fetch() individual establece un número revalidate menor que el revalidate predeterminado de una ruta, el intervalo de revalidación de toda la ruta se reducirá.
• Si dos solicitudes fetch con la misma URL en la misma ruta tienen diferentes valores revalidate, se usará el valor más bajo.
• Por conveniencia, no es necesario establecer la opción cache si revalidate está configurado como un número.
• Opciones conflictivas como { revalidate: 3600, cache: 'no-store' } causarán un error.

options.next.tags

fetch(`https://...`, { next: { tags: ['collection'] } })

Establece las etiquetas de caché de un recurso. Los datos pueden luego revalidarse bajo demanda usando revalidateTag. La longitud máxima para una etiqueta personalizada es de 256 caracteres y el máximo de elementos de etiqueta es 128.

Solución de problemas

El valor predeterminado auto no store y cache: 'no-store' no muestran datos frescos en desarrollo

Next.js almacena en caché las respuestas de fetch en Componentes del Servidor durante la Recarga de Módulos en Caliente (HMR) en desarrollo local para respuestas más rápidas y reducir costos en llamadas API facturadas.

Por defecto, la caché HMR se aplica a todas las solicitudes fetch, incluyendo aquellas con la opción predeterminada auto no cache y cache: 'no-store'. Esto significa que las solicitudes sin caché no mostrarán datos frescos entre recargas HMR. Sin embargo, la caché se borrará en navegaciones o recargas completas de página.

Consulta la documentación de serverComponentsHmrCache para más información.

Historial de versiones