Notas sobre Next.js 16 Cache Component

Hace unos seis meses, Next.js 16 se lanzó oficialmente el 21 de octubre de 2025.

El concepto de Cache Components fue introducido a partir de Next.js 16, permitiendo un control explícito del almacenamiento en caché.

Solo el lugar donde escribes la directiva use cache se almacena en caché, y también es posible el almacenamiento en caché por componente usando Suspense.

Dado que también habrá artículos publicados sobre esto, esta vez voy a recopilar mis notas sobre cómo usar "Cache Components" en Next.js 16.

Los 4 tipos de almacenamiento en caché en Next.js AppRouter

El almacenamiento en caché en Next.js AppRouter viene en 4 patrones.

• Request Memoization: Se refiere a la deduplicación de solicitudes idénticas. Aunque el mismo fetch se llame desde diferentes componentes, solo se ejecuta una vez. Es una característica que Next.js realiza automáticamente.
• Data Cache: controla la implementación del caché mediante la opción fetch.
• Full Route Cache: caché por página que funciona con renderizado estático (SSG, ISR). Implementa un mecanismo que almacena en caché el payload RSC y el HTML en el servidor.
• Router Cache: mecanismo que almacena en caché temporalmente solo el payload RSC en la memoria del cliente. Funciona al utilizar el componente de Next.js.

Nueva funcionalidad en Next.js 16: "use cache"

Qué se puede hacer con la nueva funcionalidad Cache Components.

• Simplifica la configuración del caché usando use cache. Solo se almacena en caché el lugar donde escribes use cache, permitiendo un control explícito del caché.
• Al envolver con se pueden separar componentes, permitiendo especificar el caché a nivel de componente.

En Next.js 15 anterior, fetch se almacenaba en caché de forma predeterminada, lo que dificultaba identificar dónde se cachea y dónde no, generando cachés inesperados.

Como se almacena en caché automáticamente de forma predeterminada, era necesario añadir fetch(URL, { cache: 'no-store' }) para invalidarlo.

Por el contrario, Next.js 16 cambió el enfoque: ahora especificas use cache cuando necesitas caché, resultando en un método claro y simple.

Anteriormente, la Data Cache de Next.js solo se podía aprovechar a través de fetch, pero ahora es posible aplicar el caché directamente a funciones asincrónicas que no utilizan fetch, como consultas de base de datos.

Método de implementación

Es necesario habilitar Cache Components en el archivo next.config.js.

Con esta configuración, la funcionalidad de Cache Components estará disponible.

import type { NextConfig } from "next";

const nextConfig: NextConfig = {
  cacheComponents: true,
};

export default nextConfig;

Agregue la directiva use cache al inicio del componente que desea almacenar en caché. Si desea almacenar en caché solo funciones específicas, escriba la directiva dentro de la función.

'use cache'

async function getPosts() {
  const res = await fetch('<https://api.example.com/posts>')
  return res.json()
}

export default async function PostList() {
  const posts = await getPosts()
  return (
    <ul>
      {posts.map(post => <li>{post.title}</li>)}
    </ul>
  )
}

¿Qué sucede si no agrego use cache a la función fetch?

A partir de Next.js 16, es necesario agregar use cache para almacenar en caché, pero ¿qué sucede cuando no se agrega ni use cache ni la opción cache?

Si está configurado con cacheComponents: true, generará un error. Para desabilitar intencionalmente el caché, no utilice fetch(url, { cache: 'no-store' }), sino simplemente envuélvalo con . (Si cacheComponents: false (predeterminado), puede utilizar no-store de la forma tradicional)

Caché a nivel de función

Anteriormente solo era posible especificar el caché a nivel de página, pero ahora, utilizando use cache y , es posible configurar el caché a nivel de componente y función.

La ventaja es que dentro de una misma página se puede combinar renderizado estático y dinámico, permitiendo la coexistencia de entrega estática rápida y contenido dinámico, lo que mejora drásticamente la velocidad de carga inicial y la UX. (técnica de renderizado llamada PPR)

Suspense

El rol de es procesar componentes de forma aislada del resto de la página.

Al envolver componentes con , se pueden separar, así que si deseas cachear a nivel de componente, especifica la configuración dentro del componente envuelto.

Sobre renderizado

El método de renderizado se determina según la configuración de caché.

"¿Cómo quiero mostrar esta página o datos?" (frecuencia de actualización, etc.)

↓

Decidir el método de renderizado (SSG / ISR / SSR / PPR / CSR)

↓

Configurar el caché correspondiente

Este es el enfoque.

Hay varios patrones de métodos de renderizado, pero esta vez nos saltaremos los detalles.

Por ejemplo,

En el caso de una «página de enrutamiento dinámico que obtiene datos de microCMS y muestra artículos de blog»

↓

El método de renderizado SSG o ISR es óptimo (ya que el contenido de los artículos no se actualiza con frecuencia)

↓

El caché es óptimo → agrega use cache

Se puede implementar de esta manera.

Por cierto, si no estableces Cache Components en true en el archivo next.config.js, puedes seguir usando la opción cache de fetch de la manera tradicional.

Conclusión

Al considerar la configuración de caché, es importante pensar en «¿cómo quiero mostrar estos datos y esta página?» e implementar el rendimiento óptimo adaptado a cada página.

Una vez que decidas la respuesta, naturalmente también quedará claro si debes usar use cache.

Muchas personas tienden a entender por separado el caché, los métodos de renderizado y la obtención de datos, pero en realidad todo está conectado.

¡Es importante considerarlos como un flujo único, no como conceptos separados!