Jeff Bruchado
Volver al blog

Edge Computing con JavaScript: Cómo Cloudflare Workers y Vercel Edge Están Redefiniendo Performance en 2025

Hola HaWkers, imagina tus APIs respondiendo en menos de 50ms para usuarios en cualquier lugar del mundo. Imagina deploy global instantáneo sin configurar servidores en múltiples regiones.

Bienvenido al mundo del Edge Computing con JavaScript, donde tus aplicaciones corren a milisegundos de tus usuarios, no importa donde estén.

Qué es Edge Computing y Por Qué Importa

Edge Computing es la práctica de ejecutar código lo más cerca posible del usuario final, en data centers distribuidos globalmente. En vez de procesar todo en un servidor central (traditional cloud), el código corre en "edges" - puntos de presencia (PoPs) esparcidos por el mundo.

Diferencia fundamental:

  • Traditional Cloud (AWS/GCP): Código corre en 1-3 regiones específicas
  • Edge Computing: Código corre en 200+ localizaciones globalmente
  • Latencia Traditional: 200-500ms para usuarios distantes
  • Latencia Edge: 10-50ms para cualquier usuario en el mundo

Principales plataformas Edge JavaScript en 2025:

  • Cloudflare Workers: 300+ data centers, runtime V8 isolates
  • Vercel Edge Functions: Integración perfecta con Next.js
  • Deno Deploy: Edge runtime basado en Deno
  • Fastly Compute@Edge: WebAssembly en el edge
  • AWS CloudFront Functions: Edge de AWS

Cloudflare Workers: JavaScript Global en Milisegundos

// worker.js - Cloudflare Worker básico
export default {
  async fetch(request, env, ctx) {
    const url = new URL(request.url);

    // API endpoint que corre globalmente
    if (url.pathname === '/api/user') {
      const user = {
        id: 1,
        name: 'Jeff Bruchado',
        location: request.cf.country, // País del usuario
        colo: request.cf.colo, // Data center más cercano
        timestamp: Date.now()
      };

      return new Response(JSON.stringify(user), {
        headers: {
          'Content-Type': 'application/json',
          'Cache-Control': 's-maxage=60'
        }
      });
    }

    // Proxy reverso con cache inteligente
    if (url.pathname.startsWith('/api/')) {
      const apiResponse = await fetch(`https://api.example.com${url.pathname}`);

      // Cachear en el edge por 5 minutos
      const response = new Response(apiResponse.body, apiResponse);
      response.headers.set('Cache-Control', 's-maxage=300');

      return response;
    }

    return new Response('Not Found', { status: 404 });
  }
};

// Deploy: wrangler deploy
// ¡Automáticamente distribuido para 300+ data centers!

Performance real (test global):

  • São Paulo → Worker: 12ms
  • Nueva York → Worker: 8ms
  • Tokio → Worker: 15ms
  • Londres → Worker: 11ms
  • Sydney → Worker: 18ms

Vercel Edge Functions: Next.js en el Edge

// app/api/edge/route.ts - Vercel Edge Function
import { NextRequest, NextResponse } from 'next/server';

export const runtime = 'edge'; // ⚡ ¡Corre en el edge!

export async function GET(request: NextRequest) {
  const { geo, ip } = request;

  // Personalización basada en geolocalización
  const greeting = getGreeting(geo?.country);

  // A/B testing en el edge (¡sin backend!)
  const variant = ip ? getVariant(ip) : 'A';

  return NextResponse.json({
    message: greeting,
    variant,
    location: {
      country: geo?.country,
      city: geo?.city,
      region: geo?.region
    },
    performance: {
      edge: true,
      latency: 'sub-50ms'
    }
  });
}

function getGreeting(country?: string): string {
  const greetings: Record<string, string> = {
    'BR': '¡Hola HaWker!',
    'US': 'Hello HaWker!',
    'ES': '¡Hola HaWker!',
    'FR': 'Bonjour HaWker!'
  };

  return greetings[country || 'US'] || 'Hello HaWker!';
}

function getVariant(ip: string): string {
  // Hash simple para A/B testing consistente
  const hash = ip.split('').reduce((acc, char) => {
    return acc + char.charCodeAt(0);
  }, 0);

  return hash % 2 === 0 ? 'A' : 'B';
}

Edge Middleware: Personalización Antes del Render

// middleware.ts - Next.js Edge Middleware
import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';

export function middleware(request: NextRequest) {
  const url = request.nextUrl;
  const { geo } = request;

  // Redirect basado en país (¡en el edge!)
  if (url.pathname === '/shop' && geo?.country === 'BR') {
    return NextResponse.redirect(new URL('/tienda', request.url));
  }

  // Feature flags en el edge
  const headers = new Headers(request.headers);
  if (geo?.country === 'US') {
    headers.set('x-feature-beta', 'enabled');
  }

  // Rewrite para personalización
  if (url.pathname === '/') {
    const newUrl = url.clone();
    newUrl.pathname = geo?.country === 'ES' ? '/es' : '/en';
    return NextResponse.rewrite(newUrl, { headers });
  }

  return NextResponse.next({ headers });
}

export const config = {
  matcher: ['/', '/shop', '/api/:path*']
};

// ¡Todo esto corre ANTES del servidor procesar,
// con latencia de single-digit milliseconds!

KV Storage en el Edge: Datos Globales Rápidos

// Cloudflare Workers + KV
export default {
  async fetch(request, env) {
    const url = new URL(request.url);
    const key = url.pathname.slice(1) || 'home';

    // Leer del KV (cache distribuido global)
    let page = await env.PAGES.get(key, { type: 'json' });

    if (!page) {
      // Cache miss - buscar y almacenar
      page = await fetchPageContent(key);
      await env.PAGES.put(key, JSON.stringify(page), {
        expirationTtl: 3600 // 1 hora
      });
    }

    // Incrementar contador de views (edge analytics)
    await env.ANALYTICS.put(`views:${key}:${Date.now()}`, '1', {
      expirationTtl: 86400 // 24 horas
    });

    return new Response(JSON.stringify(page), {
      headers: { 'Content-Type': 'application/json' }
    });
  }
};

async function fetchPageContent(key: string) {
  // Buscar del CMS, API, etc
  return {
    title: `Page ${key}`,
    content: 'Content from edge!',
    timestamp: Date.now()
  };
}

Edge vs Serverless vs Traditional: Cuándo Usar Cada Uno

Usa Edge cuando:

✅ Latencia global es crítica (<50ms)
✅ Personalización geográfica
✅ Enrutamiento inteligente
✅ A/B testing en tiempo real
✅ Cache dinámico
✅ Workloads leves (<1MB memoria)

Usa Serverless (Lambda/Cloud Functions) cuando:

✅ Procesamiento más pesado
✅ Integración con servicios cloud específicos
✅ Workloads de larga duración (hasta 15min)
✅ Memoria/CPU mayor necesaria

Usa Traditional Servers cuando:

✅ Aplicaciones stateful
✅ WebSocket de larga duración
✅ Procesamiento muy pesado
✅ Control total necesario

Limitaciones del Edge Computing

A pesar de las ventajas, edge tiene limitaciones importantes:

1. Limitaciones de Recursos:

  • Memoria limitada (128MB típico)
  • CPU limitado (10-50ms execution time)
  • Sin acceso al filesystem
  • Sin procesos de larga duración

2. Compatibilidad:

  • No todos los paquetes NPM funcionan
  • Node.js APIs limitadas
  • Sin bindings nativos

3. Cold Starts:

  • Cloudflare Workers: ~0ms (V8 isolates)
  • Vercel Edge: ~0ms
  • Lambda@Edge: 50-100ms

4. Costos:

  • Gratuito hasta cierto punto
  • Puede quedar caro con mucho tráfico
  • Necesita monitorear uso

Casos de Uso Reales en 2025

E-commerce Global:

  • Personalización de precios por región
  • Redireccionamiento geográfico
  • Cache de catálogo en el edge
  • A/B testing de checkout

SaaS Applications:

  • Auth en el edge (JWT verification)
  • Feature flags distribuidos
  • Analytics en tiempo real
  • Rate limiting global

Content Delivery:

  • Image optimization en el edge
  • Video streaming adaptativo
  • HTML caching dinámico
  • SEO server-side rendering

Si quieres explorar más sobre las runtimes JavaScript modernas que soportan edge computing, confiere: Bun: La Runtime JavaScript Más Rápida donde exploramos cómo elegir la runtime correcta para tus edge functions.

¡Vamos a por ello! 🦅

Únete a los Desarrolladores que Están Evolucionando

Miles de desarrolladores ya usan nuestro material para acelerar sus estudios y conquistar mejores posiciones en el mercado.

¿Por qué invertir en conocimiento estructurado?

Aprender de forma organizada y con ejemplos prácticos hace toda la diferencia en tu jornada como desarrollador.

Comienza ahora:

  • $9.90 USD (pago único)

Acceder Guía Completa

"¡Material excelente para quien quiere profundizar!" - João, Desarrollador

Comentarios (0)

Este artículo aún no tiene comentarios 😢. ¡Sé el primero! 🚀🦅

Añadir comentarios