Notas sobre Cache Component de Next.js 16

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

El concepto de Cache Components se introdujo en Next.js 16, y permite controlar la caché de forma explícita.

Solo se almacena en caché el lugar donde se escribe la directiva use cache, y también es posible realizar el almacenamiento en caché a nivel de componente mediante <Sunpense>.

Dado que también tenemos la oportunidad de publicar este artículo, en esta ocasión resumiremos, a modo de recordatorio personal, principalmente cómo usar Cache Components de Next.js 16.

Las cuatro cachés de Next.js AppRouter

En Next.js AppRouter, existen cuatro tipos de caché.

• Request Memoization: Es la eliminación de solicitudes duplicadas. Aunque distintos componentes llamen al mismo fetch, solo se ejecuta una vez. Es una función que Next.js realiza automáticamente.
• Data Cache: Un mecanismo que controla el caché de implementación mediante las opciones de fetch.
• Full Route Cache: Un caché por página que funciona con renderizado estático (SSG, ISR). Almacena en caché del lado del servidor el payload RSC y el HTML.
• Router Cache: Un mecanismo que almacena temporalmente en la memoria del cliente solo el "payload RSC". Funciona al usar el componente de Next.js.

Nueva función de Next.js 16: "use cache"

Qué puede hacer ahora la nueva función Cache Components.

• Simplifica la configuración de caché con use cache. Solo se almacena en caché el lugar donde se escribe use cache, lo que permite controlar el caché de forma explícita.
• Al envolver con <Suspense>... se pueden separar componentes y especificar el caché por componente.

Hasta Next.js 15, fetch se almacenaba en caché por defecto. Era difícil saber qué estaba o no en caché, lo que provocaba con frecuencia cachés impredecibles.

Como el caché se aplicaba automáticamente, para desactivarlo era necesario añadir fetch(URL, { cache: 'no-store' }).

En cambio, Next.js 16 cambia el enfoque: cuando se necesita caché, se indica con use cache, lo que resulta un método claramente más simple.

Además, antes solo se podía aprovechar el Data Cache de Next.js a través de fetch, pero ahora es posible aplicar la caché directamente a funciones asíncronas que no usan fetch, como las consultas a la base de datos.

Método de implementación

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

Con esta configuración, las funciones de Cache Components quedan disponibles.

import type { NextConfig } from "next";

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

export default nextConfig;

Añada la directiva use cache al inicio del componente que desee almacenar en caché. Si solo desea almacenar en caché una función específica, escríbala 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é ocurre si no se aplica use cache a la función fetch?

En Next.js 16, para usar la caché es necesario añadir use cache. Pero ¿qué ocurre si no se añaden ni use cache ni la opción cache?

Si se configura cacheComponents: true, se produce un error. Para desactivar la caché de forma intencionada, no utilice fetch(url, { cache: 'no-store' }); basta con envolverlo en <Suspense>. (Con cacheComponents: false, que es el valor predeterminado, sigue funcionando no-store como antes).

Caché a nivel de función

Antes solo era posible configurar la caché por página, pero al utilizar use cache, ahora se puede configurar la caché a nivel de componente y de función.

Esto permite combinar renderizado estático y dinámico dentro de una misma página, lo que hace posible que la entrega estática rápida y el contenido dinámico convivan. Así se mejoran notablemente la velocidad de carga inicial y la UX. (Esta es la técnica de renderizado llamada PPR).

Suspense

Su función es permitir que se procese de forma independiente, separado del resto de la página.<Suspense>

Al envolver el contenido con <Suspense>los componentes pueden separarse, por lo que, si se desea almacenar en caché a nivel de componente, se especifica dentro del componente envuelto.

Sobre el renderizado

La configuración de la caché determina el método de renderizado.

"¿Cómo quiero mostrar esta página o estos datos?" (por ejemplo, con qué frecuencia se actualizan)

↓

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

↓

Configurar la caché correspondiente

Esa es la idea.

Hay varios patrones de renderizado, pero los omitiremos por ahora.

Por ejemplo,

en el caso de una "página de rutas dinámicas que obtiene datos de microCMS y muestra artículos de blog"

↓

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

↓

Si la caché está habilitada, lo óptimo es añadir use cache.

Así es como puede implementarse.

Por cierto, si no activa Cache Components en el archivo next.config.js (estableciéndolo en true), puede seguir usando la opción cache de fetch de la forma tradicional.

Conclusión

Al configurar la caché, lo importante es el flujo de implementación: preguntarse "¿cómo queremos que se muestre este dato o esta página?" y, a partir de ahí, diseñar el rendimiento óptimo para esa página.

Una vez que se tiene esa respuesta, decidir si usar use cache también resulta natural.

Muchas personas tienden a entender por separado la caché, los métodos de renderizado y la obtención de datos, pero una vez que todo se conecta, se entiende mucho mejor.

Es importante considerarlo como un flujo único y no como conceptos separados.