Topics

Notas sobre el componente de caché de Next.js 16

  • column

Esto ocurrió hace unos seis meses, pero Next.js 16 se lanzó oficialmente el 21 de octubre de 2025.

El concepto de Componentes de Caché se introdujo en Next.js 16, lo que permite un control explícito sobre el almacenamiento en caché.

use cacheSolo se almacena en caché la ubicación donde se escribe la directiva.<Sunpense>Esto también permite el almacenamiento en caché componente por componente.

Bueno, ya que estoy escribiendo un artículo sobre ello, ¡aprovecharé para resumir cómo usar los "Componentes de caché" de Next.js 16 a modo de recordatorio!

Cuatro cachés en Next.js AppRouter

Next.js AppRouter ofrece los siguientes cuatro tipos de almacenamiento en caché:

  • Request Memoization:Esto se refiere a la eliminación de solicitudes duplicadas. Aunque se llame a la misma función fetch en diferentes componentes, solo se ejecutará una vez. Esta es una característica que Next.js gestiona automáticamente.
  • Data CacheLa opción `fetch` manipula la implementación de la caché.
  • Full Route Cache:Almacenamiento en caché a nivel de página que funciona con renderizado estático (SSG, ISR). Un mecanismo que almacena en caché en el lado del servidor utilizando cargas útiles RSC y HTML.
  • Router Cache:Este mecanismo almacena temporalmente en caché solo la carga útil RSC en la memoria del cliente. Funciona mediante el componente de Next.js.

Nuevas características en Next.js 16"use cache"

¿Qué puedes hacer con la nueva función de Componentes de caché?

  • use cacheUtilice esto para simplificar la configuración de la caché.use cacheSolo se almacena en caché la ubicación donde se escribió el código, y ahora la caché se puede controlar explícitamente.
  • <Suspense>Al encerrar los componentes en una etiqueta `