Next.js 16: Soluciona los bugs de caché de una vez por todas

Cuando trabajas con Next.js 16, los bugs de caché pueden hacer que tus usuarios vean contenido desactualizado.

El truco

ANTES (mal), un enfoque incorrecto para manejar la caché:

// getStaticProps es llamado sólo en build time
export async function getStaticProps() {
  const res = await fetch('https://api.example.com/data');
  const data = await res.json();

  return {
    props: {
      data,
    },
    revalidate: 60, // Revalida cada 60 segundos, pero no siempre funciona
  };
}

DESPUÉS (bien), implementando un control más directo:

// Server-side rendering para tener datos siempre frescos
export async function getServerSideProps() {
  const res = await fetch('https://api.example.com/data');
  const data = await res.json();

  return {
    props: {
      data,
    },
  };
}

// Middleware para controlar caché en el servidor
export function middleware(req, res) {
  res.setHeader('Cache-Control', 'no-cache, no-store, must-revalidate');
}

El truco radica en cambiar de getStaticProps con revalidate a getServerSideProps, asegurando que los datos sean siempre actuales. Además, añade un middleware de Node.js para forzar al servidor a no almacenar caché, usando las cabeceras HTTP Cache-Control.

Con esta solución, te aseguras de que los usuarios siempre reciban la información más reciente, reduciendo los problemas de caché del lado del cliente y del servidor.