Next.js 16: Soluciona los Bugs de Caché que Rompen tu App en Producción

Si tu app en Next.js 16 tiene comportamientos extraños en producción debido a inconsistencias de caché, este truco rápido te ayudará.

El truco

Antes (mal):

export async function getStaticProps() {
  const data = await fetch('https://api.example.com/data');
  return {
    props: { data },
    revalidate: 60, // Problema aquí si la API cambia datos con frecuencia
  };
}

Después (bien):

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

  const cacheControl = context.res.getHeader('Cache-Control');
  if (!cacheControl || cacheControl.includes('max-age=0')) {
    context.res.setHeader('Cache-Control', 'public, s-maxage=60, stale-while-revalidate=59');
  }

  return {
    props: { data },
  };
}

Asegúrate de ajustar los encabezados de caché directamente en las respuestas HTTP para tener un control más granular sobre el comportamiento de caché, especialmente cuando los datos de tu API pueden cambiar con mayor frecuencia de lo que permite revalidate.

Un pequeño ajuste en los encabezados de caché y tendrás una app más estable sin esos bugs molestos.