Haz visible el 'use cache' de Next.js 16 con un debugger gratuito

La gestión del cache en Next.js 16 puede ser una caja negra, dificultando el diagnóstico de problemas de performance.

El truco

// ANTES
import { useCache } from 'next/cache';

function fetchData() {
  // fetch y gestión del cache sin visibilidad
  const data = useCache('data'); 
  return data;
}

// DESPUÉS
import { useCache } from 'next/cache';

function debugCache(key) {
  const data = useCache(key);
  console.log(`Cache [${key}]:`, data);
  return data;
}

function fetchData() {
  const data = debugCache('data');
  return data;
}

Añadir un simple console.log dentro de un envoltorio para el useCache te permite ver el contenido del cache cada vez que lo usas. Esto ofrece visibilidad directa en la consola sobre qué se está almacenando y recuperando del cache. De este modo, puedes ajustar mejor el comportamiento de cacheo y resolver problemas más rápido.

La visibilidad del cache en Next.js es clave para optimizar rendimiento y resolver problemas sin dolor de cabeza.