Olvídate de los bugs de caché en Next.js de una vez por todas

Lidiar con los bugs de caché en Next.js puede ser una verdadera pesadilla si no gestionas bien el estado.

El truco

// ANTES: manejo de caché potencialmente problemático usando `localStorage`
function getData() {
  const cachedData = localStorage.getItem('data');
  if (cachedData) {
    return JSON.parse(cachedData);
  }
  const data = fetchDataFromAPI();
  localStorage.setItem('data', JSON.stringify(data));
  return data;
}

// DESPUÉS: implementación de un sistema de caché personalizado
const cache = new Map();

async function getData(key) {
  if (cache.has(key)) {
    return cache.get(key);
  }
  const data = await fetchDataFromAPI(key);
  cache.set(key, data);
  return data;
}

El truco consiste en utilizar un Map en lugar de localStorage para gestionar el estado de caché. localStorage puede llevar a inconsistencias y problemas de sincronización, mientras que un Map se gestiona en memoria y es más adecuado para aplicaciones server-rendered como las de Next.js. Además, al usar Map, puedes gestionar cachés ligeros y evitar el almacenamiento persistente problemático.

Al enfrentarte a la gestión de caché en Next.js, opta por soluciones que aprovechen la memoria para un manejo más seguro y efectivo.