Estrategias de Caché en Next.js: revalidatePath y revalidateTag

El App Router de Next.js introdujo un modelo de caché extremadamente agresivo y sofisticado con el fin de entregar tiempos de carga instantáneos al usuario. Por defecto, Next.js cachea todo lo que puede: desde las peticiones fetch de datos hasta el HTML y JSON de las páginas generadas en el servidor. Aunque esto es excelente para la performance y los Core Web Vitals, puede convertirse en un dolor de cabeza para los desarrolladores si no comprenden cómo actualizar los datos cuando estos cambian, provocando que los usuarios vean información obsoleta.

Los cuatro niveles de caché de Next.js

Next.js opera con cuatro cachés distintas: Request Memoization (en React a nivel de petición), Data Cache (en Next.js a nivel de peticiones de datos), Full Route Cache (a nivel de HTML y JSON de páginas estáticas), y Router Cache (en el navegador del cliente al navegar entre páginas). Cada una de estas capas tiene sus propias reglas de expiración e invalidación. Por ejemplo, el Request Memoization es temporal y dura solo el ciclo de vida de un renderizado, mientras que Data Cache persiste a través de peticiones y reinicios del servidor hasta que es invalidado explícitamente.

Para invalidar estas cachés de forma controlada cuando realizas una mutación de datos (por ejemplo, al crear una nueva nota en el blog, cambiar el precio de un servicio o actualizar el estado de un proyecto), Next.js nos provee de dos herramientas principales para ejecutar en el entorno del servidor: revalidatePath y revalidateTag.

Invalidar por ruta vs Invalidar por etiquetas

revalidatePath te permite invalidar toda la caché asociada a una ruta de URL específica. Es la solución más rápida si tienes una página estática (como /blog o /proyectos) y quieres forzar a Next.js a reconstruir esa página específica en el servidor la próxima vez que se solicite, reflejando el contenido actualizado de forma inmediata. Admite parámetros de profundidad para invalidar rutas hijas de forma recursiva.

revalidateTag, por otro lado, es mucho más quirúrgica y eficiente. Te permite asignar etiquetas de texto a peticiones de datos fetch individuales (por ejemplo, { next: { tags: ['posts'] } }). Cuando ejecutas revalidateTag('posts'), Next.js solo invalidará las llamadas de base de datos o APIs que tengan esa etiqueta específica, manteniendo el resto de la caché de la página intacta. Es la estrategia ideal para mantener tu sitio web rápido y con datos frescos sin sobrecargar tu servidor o base de datos, lo que es clave para optimizar recursos.