Olvídate de los bugs: Caching en Next.js 16 como un pro

En muchas aplicaciones Next.js, una mala gestión del caching puede llevar a bugs inesperados y comportamientos erráticos.

El truco

// Código ANTES (mal)
export async function getServerSideProps() {
  const data = await fetch('https://api.example.com/data');
  const json = await data.json();
  return { props: { data: json } };
}

// Código DESPUÉS (bien)
import cache from 'some-cache-library'; // Asegúrate de usar una librería de caching adecuada

export async function getServerSideProps() {
  const cacheKey = 'unique-cache-key';
  const cachedData = cache.get(cacheKey);

  if (cachedData) {
    return { props: { data: cachedData } };
  }

  const data = await fetch('https://api.example.com/data');
  const json = await data.json();

  cache.set(cacheKey, json, { ttl: 60 * 5 }); // Cachea durante 5 minutos
  return { props: { data: json } };
}

Incorporar un sistema de caching en getServerSideProps mejora la eficiencia y minimiza las llamadas innecesarias a la API. Usar una librería de caching te permite almacenar los datos durante un tiempo determinado (TTL), lo cual reduce la carga del servidor y previene errores derivados de redes inestables o APIs lentas. Asegúrate de ajustar el TTL según tus necesidades específicas de actualización y frescura de datos.

Un buen sistema de caching no solo mejora el rendimiento, sino que también te ahorra tiempo cazando bugs difíciles de reproducir.