Introducción
El App Router de Next.js tiene cuatro capas de caché que pueden causar confusión. Este artículo explica cada una y cómo configurarlas.
Las cuatro capas
- Router Cache (cliente): Cache de navegación en el navegador, basada en sesión.
- Request Memoization (servidor): Desduplica fetch dentro de un mismo ciclo de renderizado.
- Data Cache (servidor): Persiste respuestas de API entre solicitudes y usuarios.
- Full Route Cache (servidor): HTML estático y payloads RSC en tiempo de build.
Request Memoization
Si la misma URL se fetch múltiples veces en el mismo árbol de componentes, solo la primera ejecuta la llamada API. Las siguientes leen de la caché de memoización.
Data Cache
Persiste datos de API entre solicitudes. Revalidación por TTL (next.revalidate) o bajo demanda (revalidateTag, revalidatePath).
Configuración práctica
Datos en tiempo real: cache: 'no-store'. Revalidación bajo demanda: usa next.tags con revalidateTag. Para verificar, ejecuta next build e inspecciona rutas estáticas (○) vs dinámicas (λ).