fetch

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

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

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

export default async function Page() {
  // Esta solicitud debe almacenarse en caché hasta que se invalide manualmente.
  // Similar a `getStaticProps`.
  // `force-cache` es el valor por defecto y puede omitirse.
  const staticData = await fetch(`https://...`, { cache: 'force-cache' })

  // Esta solicitud debe volver a obtenerse en cada petición.
  // Similar a `getServerSideProps`.
  const dynamicData = await fetch(`https://...`, { cache: 'no-store' })

  // Esta solicitud debe almacenarse en caché con un tiempo de vida de 10 segundos.
  // Similar a `getStaticProps` con la opción `revalidate`.
  const revalidatedData = await fetch(`https://...`, {
    next: { revalidate: 10 },
  })

  return <div>...</div>
}

export default async function Page() {
  // Esta solicitud debe almacenarse en caché hasta que se invalide manualmente.
  // Similar a `getStaticProps`.
  // `force-cache` es el valor por defecto y puede omitirse.
  const staticData = await fetch(`https://...`, { cache: 'force-cache' })

  // Esta solicitud debe volver a obtenerse en cada petición.
  // Similar a `getServerSideProps`.
  const dynamicData = await fetch(`https://...`, { cache: 'no-store' })

  // Esta solicitud debe almacenarse en caché con un tiempo de vida de 10 segundos.
  // Similar a `getStaticProps` con la opción `revalidate`.
  const revalidatedData = await fetch(`https://...`, {
    next: { revalidate: 10 },
  })

  return <div>...</div>
}

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' })

• force-cache (valor por defecto) - 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 la coincidencia está obsoleta, Next.js obtendrá el recurso del servidor remoto y actualizará la caché con el recurso descargado.
• no-store - Next.js obtiene el recurso del servidor remoto en cada solicitud sin buscar en la caché, y no actualizará la caché con el recurso descargado.

Nota importante:

• Si no proporcionas una opción cache, Next.js usará force-cache por defecto, a menos que se use una función dinámica como cookies(), en cuyo caso usará no-store.
• La opción no-cache se comporta igual que no-store en Next.js.

options.next.revalidate

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

Establece el tiempo de vida de un recurso en caché (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.

Nota importante:

• Si una solicitud fetch() individual establece un número revalidate menor que el revalidate por defecto de una ruta, se reducirá el intervalo de revalidación de toda la ruta.
• 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, ya que 0 implica cache: 'no-store' y un valor positivo implica cache: 'force-cache'.
• Opciones conflictivas como { revalidate: 0, cache: 'force-cache' } o { revalidate: 10, 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.

Historial de versiones