Aprovechando el Edge Computing con Claude Code

Que es el Edge Computing

El edge computing es una tecnologia que ejecuta el procesamiento en servidores geograficamente cercanos al usuario. Reduce drasticamente la latencia y logra respuestas rapidas. Utilicemos Claude Code para construir aplicaciones compatibles con edge.

Cloudflare Workers

// src/index.ts
export default {
  async fetch(
    request: Request,
    env: Env,
    ctx: ExecutionContext
  ): Promise<Response> {
    const url = new URL(request.url);

    // Enrutamiento
    switch (url.pathname) {
      case "/api/geo":
        return handleGeo(request);
      case "/api/cache":
        return handleCachedData(request, env, ctx);
      default:
        return new Response("Not Found", { status: 404 });
    }
  },
};

function handleGeo(request: Request): Response {
  // Headers agregados automaticamente por Cloudflare
  const country = request.headers.get("cf-ipcountry") || "unknown";
  const city = request.cf?.city || "unknown";

  return Response.json({
    country,
    city,
    message: `Hola! Accediendo desde ${city}.`,
  });
}

async function handleCachedData(
  request: Request,
  env: Env,
  ctx: ExecutionContext
): Promise<Response> {
  const cacheKey = new URL(request.url).pathname;

  // Obtener cache del almacen KV
  const cached = await env.MY_KV.get(cacheKey);
  if (cached) {
    return Response.json(JSON.parse(cached), {
      headers: { "X-Cache": "HIT" },
    });
  }

  // Obtener datos del origen
  const data = await fetch("https://api.example.com/data").then(
    (r) => r.json()
  );

  // Cachear en KV (TTL: 5 minutos)
  ctx.waitUntil(
    env.MY_KV.put(cacheKey, JSON.stringify(data), {
      expirationTtl: 300,
    })
  );

  return Response.json(data, {
    headers: { "X-Cache": "MISS" },
  });
}

Vercel Edge Functions

// app/api/personalize/route.ts
import { NextRequest } from "next/server";

export const runtime = "edge";

export async function GET(request: NextRequest) {
  const country = request.geo?.country || "US";
  const region = request.geo?.region || "unknown";

  // Contenido segun la region
  const content = await getLocalizedContent(country);

  // Configuracion de cache en edge
  return Response.json(
    {
      content,
      servedFrom: region,
      timestamp: Date.now(),
    },
    {
      headers: {
        "Cache-Control": "public, s-maxage=60, stale-while-revalidate=300",
      },
    }
  );
}

async function getLocalizedContent(country: string) {
  const priceMultiplier: Record<string, number> = {
    JP: 1,
    US: 0.0067,
    EU: 0.0061,
  };

  return {
    currency: country === "JP" ? "USD" : country === "US" ? "USD" : "EUR",
    multiplier: priceMultiplier[country] || 1,
  };
}

Procesamiento de autenticacion en edge

// middleware.ts (Vercel Edge Middleware)
import { NextRequest, NextResponse } from "next/server";
import { jwtVerify } from "jose";

const secret = new TextEncoder().encode(process.env.JWT_SECRET!);

export async function middleware(request: NextRequest) {
  // Omitir rutas publicas
  const publicPaths = ["/", "/login", "/api/auth"];
  if (publicPaths.some((p) => request.nextUrl.pathname.startsWith(p))) {
    return NextResponse.next();
  }

  const token = request.cookies.get("token")?.value;
  if (!token) {
    return NextResponse.redirect(new URL("/login", request.url));
  }

  try {
    const { payload } = await jwtVerify(token, secret);

    // Agregar informacion del usuario a los headers de la solicitud
    const response = NextResponse.next();
    response.headers.set("x-user-id", payload.sub as string);
    response.headers.set("x-user-role", payload.role as string);
    return response;
  } catch {
    return NextResponse.redirect(new URL("/login", request.url));
  }
}

export const config = {
  matcher: ["/dashboard/:path*", "/api/protected/:path*"],
};

Pruebas A/B en edge

export const runtime = "edge";

export async function middleware(request: NextRequest) {
  // Verificar asignacion de variante existente
  const variant = request.cookies.get("ab-variant")?.value;

  if (!variant) {
    // Asignar aleatoriamente a nuevos usuarios
    const newVariant = Math.random() < 0.5 ? "A" : "B";
    const response = NextResponse.next();
    response.cookies.set("ab-variant", newVariant, {
      maxAge: 60 * 60 * 24 * 30,
    });

    // Reescribir a la pagina segun la variante
    if (newVariant === "B") {
      return NextResponse.rewrite(
        new URL("/variants/b" + request.nextUrl.pathname, request.url)
      );
    }
    return response;
  }

  if (variant === "B") {
    return NextResponse.rewrite(
      new URL("/variants/b" + request.nextUrl.pathname, request.url)
    );
  }

  return NextResponse.next();
}

Uso con Claude Code

Ejemplo de como solicitar a Claude Code la implementacion de funciones edge. Para optimizacion de rendimiento, consulte Comparacion SSR vs SSG. Para estrategias de cache, consulte Diseno de cache con Redis.

Implementa APIs con Vercel Edge Functions.
- Servir contenido diferenciado por region
- Verificacion JWT en edge
- Cache con almacen KV
- Middleware de pruebas A/B

Para detalles de Cloudflare Workers, consulte la documentacion oficial de Cloudflare Workers. Para el uso de Claude Code, consulte la documentacion oficial.

Resumen

El edge computing logra la reduccion de latencia y escalabilidad al mismo tiempo. Con Claude Code, puede implementar eficientemente codigo compatible con edge comprendiendo las APIs especificas de cada plataforma y las mejores practicas.