El almacenamiento en caché en Next.js no se trata solo de ahorrar tiempo: se trata de reducir las solicitudes de red redundantes, mantener los datos actualizados y hacer que su aplicación funcione como una estrella de rock.
Ya sea que esté intentando mantener los datos almacenados en caché por más tiempo o actualizarlos según sea necesario, Next.js le brinda todas las herramientas que necesita. En este artículo, analizaremos cómo utilizar el almacenamiento en caché de forma eficaz en Next.js

Next.js amplía la API de recuperación para brindarle superpoderes cuando se trata de almacenamiento en caché. Con opciones de recuperación simples como cache: 'no-store' y cache: 'force-cache', puedes controlar fácilmente cuándo y cómo se almacenan en caché los datos.

Always Fresh con caché: 'no-store' (Equivalente a unstable_noStore())

¿Quieres datos nuevos cada vez? cache: 'no-store' es el indicado. Esta opción de recuperación omite el caché por completo y obtiene los datos más recientes con cada solicitud. Es perfecto cuando necesitas precisión en tiempo real: no se permiten restos de la búsqueda de ayer.

Nota: También puedes usar unstable_noStore() si deseas omitir el caché en un componente del servidor. La sintaxis puede cambiar más adelante, así que quédate con cache: 'no-store' para mayor estabilidad.

Reutilizar datos con caché: 'force-cache' (Equivalente a unstable_cache())

Por otro lado, si estás de acuerdo con el uso de datos almacenados en caché (piensa en contenido estático que no cambia con frecuencia), elige cache: 'force-cache'. Guardará la respuesta para uso futuro y omitirá solicitudes de red redundantes.

Nota: unstable_cache() también almacena datos en caché, pero usar el cache estable: 'force-cache' es más confiable si evitas sorpresas en el futuro.

Manténgalo actualizado con revalidaciones

A veces, los datos almacenados en caché necesitan una actualización, ya sea después de un tiempo determinado o cuando los activa un evento. Por suerte para ti, Next.js te permite revalidar tus datos almacenados en caché de varias maneras.

Revalidar con tiempo: next.revalidate

Si sus datos necesitan actualizarse periódicamente (como cada hora o día), puede establecer un período de revalidación usando la opción next.revalidate en su solicitud de recuperación. Tomará los datos más recientes después del tiempo que especifiques y mantendrá los datos en caché el resto del tiempo.

fetch('https://api.example.com/data', {
  next: { revalidate: 3600 }  // Revalidate data every hour (3600 seconds)
});

Revalidación bajo demanda con etiquetas: revalidateTag()

Ahora, imagina que puedes decirle a Next.js que actualice bits específicos de datos almacenados en caché cuando sucede algo importante, como el envío de un formulario o la publicación de una nueva publicación de blog. Puede asignar etiquetas a sus datos almacenados en caché y luego revalidar esas etiquetas cuando sea necesario.

De esta manera, puedes actualizar manualmente partes de tu caché cuando lo solicites sin tener que esperar a la siguiente revalidación programada.

Usando los métodos inestables

Si eres del tipo aventurero, también puedes usar los métodos unstable_noStore() y unstable_cache() directamente en los componentes del servidor para administrar el comportamiento del almacenamiento en caché. Solo tenga en cuenta que estos son "inestables" por una razón, por lo que podrían cambiar en el futuro (o podrían haber sido modificados en el momento en que lo lee).

O si te gusta el almacenamiento en caché, así es como puedes usar unstable_cache():

Evite la perforación de utilería

Aquí tienes un buen truco: si estás obteniendo los mismos datos en varios componentes (como un diseño, una página y algunos componentes internos), no te preocupes por buscarlos una vez en la parte superior y pasarlos hacia abajo o tener que hacerlo. realice una solicitud de esos datos varias veces en múltiples componentes que causan una ralentización del rendimiento. Next.js memoriza automáticamente las solicitudes de recuperación durante la representación del servidor, lo que significa que si recupera los mismos datos varias veces, es lo suficientemente inteligente como para acceder a la red solo una vez y compartir el resultado en varios componentes.

Resumiendo

Next.js le brinda todas las herramientas que necesita para administrar el almacenamiento en caché de manera efectiva, ya sea a través de opciones de recuperación de API como cache: 'no-store' y cache: 'force-cache', o los métodos más experimentales unstable_noStore() y unstable_cache(). Agregue estrategias de revalidación como next.revalidate y revalidateTag y tendrá todo lo que necesita para mantener sus datos actualizados sin sudar.

Fuentes:
Almacenamiento en caché de Next.js