Optimizando el rendimiento: Cómo gestionamos los límites de Vercel en TuTiendaWeb

TuTiendaWeb es una plataforma que utiliza Next.js y Firebase Storage para ofrecer una experiencia de comercio electrónico ágil. Recientemente, nos enfrentamos a un problema inesperado: las imágenes dejaron de cargar, mostrando el fallback gris. Tras investigar, descubrimos que habíamos superado el límite de 5,000 transformaciones de imagen del plan Hobby de Vercel.

El problema de las transformaciones

Al utilizar next/image, Vercel intercepta las peticiones de imágenes para aplicar redimensionamiento y optimización automática. Aunque esta es una funcionalidad potente, cada transformación cuenta contra la cuota mensual. Con el crecimiento del catálogo y el uso intensivo de componentes como galerías y modales, nuestro proyecto alcanzó ese límite rápidamente.

La solución: Desactivar la optimización automática

Dado que nuestro flujo de trabajo ya incluye una compresión previa de imágenes en el cliente mediante una librería de procesamiento antes de subirlas a Firebase, no necesitábamos realizar transformaciones adicionales en tiempo de ejecución.

La solución fue sencilla pero efectiva. Modificamos nuestra configuración de next.config.js para indicar a Next.js que sirva las imágenes directamente desde el origen:

/** @type {import('next').NextConfig} */
const nextConfig = {
  images: {
    unoptimized: true,
  },
};

module.exports = nextConfig;

Al establecer unoptimized: true, cada componente next/image ahora apunta directamente a la URL de Firebase Storage. Esto elimina por completo el uso del endpoint de optimización de Vercel, evitando errores futuros por límites de cuota sin afectar la calidad visual, ya que las imágenes llegan comprimidas desde el origen.

El impacto

Después de aplicar este cambio, realizamos un despliegue y verificamos a través de las herramientas de desarrollo del navegador que las solicitudes de red ya no pasan por el proxy de Vercel (/_next/image), sino que consultan directamente a Firebase. Esto redujo drásticamente el consumo de recursos de infraestructura del plan Hobby.

Lecciones aprendidas

Las abstracciones y herramientas de conveniencia son excelentes, pero siempre tienen un costo operativo. Si tu aplicación ya gestiona la compresión de archivos antes de almacenarlos, desactivar la optimización automática de imágenes es una estrategia eficiente para escalar tu proyecto sin incurrir en costos adicionales. Revisa los límites de tus servicios en la nube antes de escalar tus funcionalidades de frontend.

Generated with Gitvlg.com