Next.js 16: Soluciona los bugs silenciosos de caché

Los errores silenciosos de caché en Next.js 16 pueden ser un quebradero de cabeza y afectar el rendimiento de tu aplicación sin ninguna advertencia.

El truco

Antes (mal):

// next.config.js
module.exports = {
  async headers() {
    return [
      {
        source: '/(.*)',
        headers: [
          {
            key: 'Cache-Control',
            value: 'max-age=31536000', // Esto puede ignorar cambios en el código
          },
        ],
      },
    ];
  },
};

Después (bien):

// next.config.js
const nextConfig = {
  async headers() {
    return [
      {
        source: '/_next/(.*)',
        headers: [
          {
            key: 'Cache-Control',
            value: 'public, max-age=31536000, immutable',
          },
        ],
      },
      {
        source: '/(.*)',
        headers: [
          {
            key: 'Cache-Control',
            value: 'no-cache', // Asegura que las actualizaciones se capturan
          },
        ],
      },
    ];
  },
};

module.exports = nextConfig;

Configurar de forma incorrecta los encabezados de caché puede provocar que los navegadores sirvan recursos desactualizados. Usa immutable solo para recursos que realmente no cambiarán y no-cache para otros, asegurando siempre que tus actualizaciones lleguen a los usuarios. Así, mantendrás el rendimiento sin sacrificar la capacidad de actualización de tu app.

Ajustar tus políticas de caché correctamente en Next.js 16 garantiza que los cambios críticos lleguen a tiempo a tus usuarios sin penalizar el rendimiento.