En producción con Next.js 16, las cachés invisibles pueden provocar errores difíciles de detectar, especialmente cuando las configuraciones de caché no están bien definidas.

El truco

Antes (mal):

// next.config.js
module.exports = {
  async headers() {
    return [
      {
        source: '/:path*',
        headers: [
          { key: 'Cache-Control', value: 'public, max-age=0, must-revalidate' },
        ],
      },
    ];
  },
};

Después (bien):

// next.config.js
module.exports = {
  async headers() {
    return [
      {
        source: '/:path*',
        headers: [
          {
            key: 'Cache-Control',
            value: 'public, max-age=31536000, immutable',
          },
        ],
      },
    ];
  },
};

Al usar max-age=0 y must-revalidate, obligas al navegador a verificar en el servidor en cada solicitud, lo que puede causar problemas en producción por la falta de caching efectivo. Cambiando a max-age=31536000, immutable, tú estableces una caché de larga duración y marcas los recursos como inmutables, indicando que no cambiarán, mejorando el rendimiento al reducir solicitudes redundantes al servidor.

Controlar las cachés de manera eficaz es esencial para evitar problemas de producción y mejorar el rendimiento de las aplicaciones Next.js.