Next.js 16: Domina el caching y evita dolores de cabeza en producción

¿Problemas con el caché de tus páginas en producción y bugs difíciles de rastrear?

El truco

// ANTES: Uso incorrecto del caché
export async function getStaticProps() {
  const res = await fetch('https://api.example.com/data');
  const data = await res.json();

  return {
    props: {
      data
    },
    revalidate: 10 // Valor por defecto, no siempre recomendable
  };
}

// DESPUÉS: Control preciso del caché
export async function getStaticProps() {
  const res = await fetch('https://api.example.com/data', {
    headers: {
      'Cache-Control': 'no-cache', // Evitar cachear la respuesta de la API
    }
  });
  const data = await res.json();

  return {
    props: {
      data
    },
    revalidate: process.env.NODE_ENV === 'production' ? 60 : 10 // Ajuste según el entorno
  };
}

Para evitar cachés problemáticos, asegúrate de que las respuestas de tu API no se cacheen innecesariamente. Controla el revalidate dinámicamente según el entorno. En producción, un valor más alto reduce la carga del servidor y en desarrollo uno bajo ayuda a detectar cambios y bugs.

Un control adecuado del caché puede ahorrarte sorpresas desagradables en producción y mejorar la experiencia del usuario final.