Destripando Next.js 16: Evita los bugs silenciosos ahora mismo

En Next.js 16, podrías encontrarte con bugs de caché que nunca salen a la luz en desarrollo pero que están ahí, listos para morderte en producción.

El truco

// ANTES: Puede llevar a bugs silenciosos en producción
export async function getStaticProps() {
  const data = await fetch('https://api.example.com/data');
  return {
    props: {
      data,
    },
    revalidate: 60, // Revalida cada minuto
  };
}

// DESPUÉS: Maneja mejor la caché y evita sorpresas
export async function getStaticProps() {
  const data = await fetch('https://api.example.com/data', {
    cache: 'no-cache',
  });
  return {
    props: {
      data,
    },
    revalidate: 60, // Revalida cada minuto
  };
}

El problema surge porque Next.js, al ser server-side, puede cachear respuestas de red de maneras que no esperas, sobre todo en producción. Cambiando el método de fetch para utilizar cache: 'no-cache', obligamos a que cada petición obtenga datos frescos directamente del servidor y no de una caché intermedia que pueda estar desactualizada.

No subestimes la importancia de manejar correctamente las opciones de caché en tus fetches: un minuto de retraso en datos críticos puede costar mucho.