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 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é 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á actualizada, 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.
• 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.

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 en 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 por defecto de una ruta, se reducirá todo el intervalo de revalidación de 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 se establece en 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 y el máximo de elementos de etiqueta es 128.

Historial de Versiones