Next.js 16: Solucionando los bugs ocultos de caché

Los bugs de caché en Next.js 16 son traicioneros y a menudo pasan a producción sin ser detectados.

El truco

// ANTES (mal)
export async function getStaticProps() {
  // Llamada a la API que potencialmente cambia frecuentemente
  const data = await fetch('https://api.ejemplo.com/data');
  return { props: { data } };
}

// DESPUÉS (bien)
export async function getStaticProps(context) {
  const res = await fetch('https://api.ejemplo.com/data', {
    headers: {
      'Cache-Control': 'no-cache'
    }
  });
  const data = await res.json();

  return {
    props: { data },
    revalidate: 10 // Revalida cada 10 segundos
  };
}

Añadir el encabezado Cache-Control: 'no-cache' en la llamada fetch asegura que obtienes datos frescos y configura revalidate para actualizar la caché cada 10 segundos. Esto ayuda a evitar que los cambios críticos pasen desapercibidos debido a datos obsoletos.

Un pequeño ajuste en la configuración de caché puede prevenir grandes dolores de cabeza en producción.