Cómo Next.js 16 te está saboteando con bugs de caché (y cómo solucionarlo)

Next.js 16 a veces almacena en caché respuestas que no debería, causando que usuarios vean contenido desactualizado.

El truco

// Antes (mal)
export async function getServerSideProps(context) {
  const res = await fetch('https://api.example.com/data');
  const data = await res.json();

  return { props: { data } };
}

// Después (bien)
export async function getServerSideProps(context) {
  context.res.setHeader('Cache-Control', 'no-store');

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

  return { props: { data } };
}

Añadir la cabecera Cache-Control: no-store a las respuestas de getServerSideProps impide que Next.js almacene en caché, garantizando que los usuarios siempre reciban datos frescos. Esto es crucial si tus datos cambian frecuentemente o son sensibles a los cambios.

Next.js 16 puede complicarte la vida con su gestión de caché, pero tomando el control manual puedes asegurar que tus usuarios vean siempre información actual.