Cómo almacenar en caché y revalidar datos

El almacenamiento en caché (caching) es una técnica para guardar el resultado de la obtención de datos y otros cálculos, de modo que las solicitudes futuras para los mismos datos puedan servirse más rápido, sin tener que realizar el trabajo nuevamente. Mientras que la revalidación (revalidation) le permite actualizar las entradas de la caché sin tener que reconstruir toda su aplicación.

Next.js proporciona algunas APIs para manejar el almacenamiento en caché y la revalidación. Esta guía le mostrará cuándo y cómo usarlas.

• fetch
• unstable_cache
• revalidatePath
• revalidateTag

fetch

Por defecto, las solicitudes fetch no se almacenan en caché. Puede almacenar en caché solicitudes individuales configurando la opción cache en 'force-cache'.

export default async function Page() {
  const data = await fetch('https://...', { cache: 'force-cache' })
}

Nota importante: Aunque las solicitudes fetch no se almacenan en caché por defecto, Next.js prerrenderizará las rutas que tienen solicitudes fetch y almacenará en caché el HTML. Si desea garantizar que una ruta sea dinámica, use la API connection.

Para revalidar los datos devueltos por una solicitud fetch, puede usar la opción next.revalidate.

export default async function Page() {
  const data = await fetch('https://...', { next: { revalidate: 3600 } })
}

Esto revalidará los datos después de una cantidad específica de segundos.

Consulte la referencia de la API fetch para obtener más información.

unstable_cache

unstable_cache le permite almacenar en caché el resultado de consultas a bases de datos y otras funciones asíncronas. Para usarlo, envuelva unstable_cache alrededor de la función. Por ejemplo:

import { db } from '@/lib/db'
export async function getUserById(id: string) {
  return db
    .select()
    .from(users)
    .where(eq(users.id, id))
    .then((res) => res[0])
}

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

export async function getUserById(id) {
  return db
    .select()
    .from(users)
    .where(eq(users.id, id))
    .then((res) => res[0])
}

La función acepta un tercer objeto opcional para definir cómo se debe revalidar la caché. Acepta:

• tags: un array de etiquetas que Next.js usa para revalidar la caché.
• revalidate: el número de segundos después de los cuales se debe revalidar la caché.

const getCachedUser = unstable_cache(
  async () => {
    return getUserById(userId)
  },
  [userId],
  {
    tags: ['user'],
    revalidate: 3600,
  }
)

Consulte la referencia de la API unstable_cache para obtener más información.

revalidateTag

revalidateTag se usa para revalidar entradas de caché basadas en una etiqueta y después de un evento. Para usarlo con fetch, comience etiquetando la función con la opción next.tags:

export async function getUserById(id: string) {
  const data = await fetch(`https://...`, {
    next: {
      tags: ['user'],
    },
  })
}

Alternativamente, puede marcar una función unstable_cache con la opción tags:

export const getUserById = unstable_cache(
  async (id: string) => {
    return db.query.users.findFirst({ where: eq(users.id, id) })
  },
  ['user'], // Necesario si las variables no se pasan como parámetros
  {
    tags: ['user'],
  }
)

Luego, llame a revalidateTag en un Route Handler o Server Action:

import { revalidateTag } from 'next/cache'

export async function updateUser(id: string) {
  // Mutar datos
  revalidateTag('user')
}

Puede reutilizar la misma etiqueta en múltiples funciones para revalidarlas todas a la vez.

Consulte la referencia de la API revalidateTag para obtener más información.

revalidatePath

revalidatePath se usa para revalidar una ruta después de un evento. Para usarlo, llámelo en un Route Handler o Server Action:

import { revalidatePath } from 'next/cache'

export async function updateUser(id: string) {
  // Mutar datos
  revalidatePath('/profile')

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