Los 5 Metrics de Vercel que Realmente Impactan tu Factura

Programación· 6 min de lectura

Los 5 Metrics de Vercel que Realmente Impactan tu Factura

El Problema Real: No Sabes Qué Te Cuesta

Llevo años deployando en Vercel. Cuando empecé, creía que era simple: subes código, se despliega, fin. Pero después de escalar algunos proyectos, me di cuenta de que la mayoría de desarrolladores no entienden realmente qué están pagando.

No es culpa tuya. El dashboard de Vercel es bonito pero poco intuitivo cuando necesitas entender dónde va tu dinero.

Hoy voy a desglosar los 5 metrics que realmente importan. Y no, no es solo "cuántas requests".

1. Edge Requests: El Primero Que Ves

Este es el más obvio pero también el más engañoso.

Una Edge Request es cada vez que alguien hace una petición a tu aplicación. Parece simple, ¿verdad? Pues no lo es.

Por qué es engañoso

Muchos desarrolladores piensan: "Tengo 100.000 usuarios al mes, eso son 100.000 requests". Error monumental.

Un usuario típico genera múltiples requests:

  • La carga inicial del HTML
  • Los archivos CSS y JS
  • Las llamadas a APIs
  • Los assets (imágenes, fonts)
  • Los analytics
  • Las peticiones de fondo que hace tu app

Un usuario puede generar fácilmente 50-100 requests sin que tú lo sepas.

Cómo optimizarlo

```javascript // ❌ MAL: Cada cambio en el estado hace una request function UserProfile() { const [user, setUser] = useState(null);

useEffect(() => { fetch('/api/user'); }, [user]); // Esto genera requests constantemente }

// ✅ BIEN: Cachear y batching function UserProfile() { const { data: user } = useSWR('/api/user', fetcher, { revalidateOnFocus: false, revalidateOnReconnect: false, dedupingInterval: 60000 // Cache de 1 minuto }); } ```

La clave está en:

  • **Caching agresivo**: Usa `Cache-Control` headers
  • **Deduplicación**: SWR y React Query lo hacen automáticamente
  • **Compression**: Vercel lo hace por defecto, pero verifica que esté activado

2. Data Transfer: El Que Crece Sin Control

Este es mi favorito porque es donde muchos se sorprenden.

Data Transfer es la cantidad de datos que Vercel sirve desde tus Edge Functions y desde tu origen. Y aquí es donde pequeñas decisiones tienen grandes consecuencias.

Casos reales que he visto

Caso 1: Imágenes sin optimizar

Un desarrollador subía imágenes de 5MB en formato PNG. Con 1.000 usuarios diarios, eso eran rápidamente gigabytes de transfer al mes.

Solución: Next.js Image Optimization. Punto.

```javascript import Image from 'next/image';

// ✅ BIEN: Next.js optimiza automáticamente <Image src="/photo.png" alt="Photo" width={800} height={600} quality={75} /> ```

Caso 2: APIs que devuelven demasiados datos

Un endpoint devolvía 100 campos cuando solo necesitabas 5. Multiplica eso por miles de requests y tienes un problema.

```javascript // ❌ MAL: Devuelves todo app.get('/api/users', async (req, res) => { const users = await db.query('SELECT * FROM users'); res.json(users); });

// ✅ BIEN: Solo lo necesario app.get('/api/users', async (req, res) => { const users = await db.query( 'SELECT id, name, email FROM users' ); res.json(users); }); ```

Monitoreo práctico

En el dashboard de Vercel, ve a Analytics y filtra por Data Transfer. Identifica qué endpoints consumen más. Típicamente encontrarás:

  • Assets no comprimidos
  • APIs que devuelven demasiados datos
  • Webhooks que se ejecutan más de lo necesario

3. Function Duration: El Que Causa Picos

Este es donde muchos desarrolladores pierden dinero sin darse cuenta.

Function Duration es cuánto tiempo tus Serverless Functions están ejecutándose. Y sí, cada segundo cuenta.

El problema

Una función que tarda 30 segundos en ejecutarse es una función que está bloqueando recursos. Vercel cobra por eso.

Culpables típicos

```javascript // ❌ MAL: Esperando operaciones lentas export default async function handler(req, res) { // Esto puede tardar 10+ segundos const data = await slowDatabaseQuery(); const processed = await complexCalculation(data); const result = await anotherSlowOperation(processed);

res.json(result); }

// ✅ BIEN: Procesar en background export default async function handler(req, res) { // Responder rápido const jobId = generateId();

// Procesar en background processAsync(jobId);

res.json({ jobId }); } ```

Estrategias de optimización

1. Parallelización: Ejecuta operaciones simultáneamente

```javascript // ✅ MEJOR: Promise.all const [users, posts, comments] = await Promise.all([ fetchUsers(), fetchPosts(), fetchComments() ]); ```

2. Caching en edge: Usa Vercel Edge Middleware

```javascript // middleware.ts import { NextResponse } from 'next/server';

export function middleware(request) { if (request.nextUrl.pathname.startsWith('/api/static')) { return NextResponse.json( { data: 'cached' }, { headers: { 'Cache-Control': 'public, s-maxage=3600' } } ); } } ```

3. Background Jobs: Mueve trabajo pesado a colas

Usa Bull, RabbitMQ o incluso Vercel Cron para tareas que no necesitan respuesta inmediata.

4. Build Time: El Silencioso

No aparece en tu factura directamente, pero afecta tu productividad y tu frustración.

Vercel cobra por build minutes en planes superiores. Si tus builds tardan 10 minutos y deploys 50 veces al mes, eso suma rápido.

Optimizaciones

```bash

✅ Usa Turbopack en Next.js 16+

Es automático, pero verifica en vercel.json

{ "buildCommand": "next build" } ```

Con Turbopack, típicamente ves reducciones significativas en build time.

5. Requests a Bases de Datos: El Que Olvidas Contar

No es un metric de Vercel directamente, pero impacta tu factura total porque afecta a Function Duration.

Cada query a tu base de datos es tiempo de ejecución.

El N+1 Problem

```javascript // ❌ MAL: N+1 queries const users = await db.query('SELECT * FROM users'); for (const user of users) { user.posts = await db.query('SELECT * FROM posts WHERE user_id = ?', [user.id]); }

// ✅ BIEN: Una sola query const users = await db.query(` SELECT u.*, p.* FROM users u LEFT JOIN posts p ON u.id = p.user_id `); ```

Cómo Monitorear Todo Esto

Dashboard de Vercel

1. Ve a tu proyecto 2. Analytics → Edge Network 3. Filtra por timeframe y endpoint 4. Identifica los culpables

En tu código

Usa la SDK de Vercel para logging:

```javascript import { log } from '@vercel/functions';

export default async function handler(req, res) { const start = Date.now();

try { const data = await fetchData(); log(`Operation took ${Date.now() - start}ms`); res.json(data); } catch (error) { log(`Error: ${error.message}`); res.status(500).json({ error: error.message }); } } ```

La Realidad: Es Más Fácil de Lo Que Parece

No necesitas ser un experto en infraestructura para optimizar estos 5 metrics. La mayoría de mejoras vienen de:

1. Entender qué se está ejecutando: Usa el dashboard 2. Cachear agresivamente: Reduce requests 3. Optimizar payloads: Menos datos = menos transfer 4. Paralelizar operaciones: Reduce duration 5. Monitorear continuamente: Detecta problemas antes de que crezcan

Yo lo hago así: cada viernes reviso mi dashboard de Vercel durante 10 minutos. Busco anomalías. Si veo un pico, investigo. Eso es todo.

Takeaway

Vercel es excelente para developers porque maneja la infraestructura. Pero eso no significa que puedas ignorar cómo funciona.

Los 5 metrics que importan son Edge Requests, Data Transfer, Function Duration, Build Time y Database Queries. Monitoréalos. Optimízalos. Repite.

Tu factura (y tu conciencia) te lo agradecerán.

---

¿Cuál de estos metrics te está sorprendiendo en tu proyecto? Cuéntame en Twitter [@brianmena_dev](https://twitter.com/brianmena_dev).