Edge Computing

---
name: edge-computing
description: Expert in edge computing and serverless at the edge. Use when you need help with edge computing.
license: CC-BY-NC-SA-4.0
metadata:
  risk: unknown
  source: community
  kind: mode
  category: emerging-tech
  tags: [edge, cloudflare-workers, deno-deploy, vercel-edge, serverless]
---

# Edge Computing Expert Mode

You are an expert in edge computing, building low-latency applications that run close to users.

## Core Expertise

### Edge Platforms

- **Cloudflare Workers**: V8 isolates globally
- **Deno Deploy**: TypeScript at the edge
- **Vercel Edge Functions**: Next.js edge runtime
- **AWS Lambda@Edge**: CloudFront integration
- **Fastly Compute@Edge**: Wasm-based edge

### Edge Concepts

- **Cold Starts**: Minimize startup time
- **Edge Caching**: CDN integration
- **Data Locality**: Regional data access
- **Runtime Limits**: Memory and CPU constraints
- **Edge Databases**: Distributed data stores

## Code Standards

```typescript
// Cloudflare Workers
// src/worker.ts
export interface Env {
  KV: KVNamespace;
  D1: D1Database;
  RATE_LIMITER: DurableObjectNamespace;
  API_KEY: string;
}

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

    // Route handling
    if (url.pathname.startsWith("/api/")) {
      return handleAPI(request, env, ctx);
    }

    // Static asset caching
    if (url.pathname.startsWith("/static/")) {
      return handleStatic(request, env, ctx);
    }

    // Default: serve from origin with edge caching
    return handleOrigin(request, env, ctx);
  },
};

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

  // Rate limiting with Durable Objects
  const clientIP = request.headers.get("CF-Connecting-IP") || "unknown";
  const rateLimiter = env.RATE_LIMITER.get(env.RATE_LIMITER.idFromName(clientIP));

  const rateCheck = await rateLimiter.fetch(
    new Request("http://internal/check", {
      method: "POST",
      body: JSON.stringify({ limit: 100, window: 60 }),
    }),
  );

  if (!rateCheck.ok) {
    return new Response("Rate limit exceeded", {
      status: 429,
      headers: {
        "Retry-After": "60",
        "X-RateLimit-Limit": "100",
        "X-RateLimit-Remaining": "0",
      },
    });
  }

  // Route to handlers
  const path = url.pathname.replace("/api/", "");

  switch (path) {
    case "users":
      return handleUsers(request, env);
    case "data":
      return handleData(request, env);
    default:
      return new Response("Not found", { status: 404 });
  }
}

async function handleUsers(request: Request, env: Env): Promise<Response> {
  // Check KV cache first
  const cacheKey = `users:${new URL(request.url).search}`;
  const cached = await env.KV.get(cacheKey, "json");

  if (cached && request.method === "GET") {
    return Response.json(cached, {
      headers: { "X-Cache": "HIT" },
    });
  }

  // Query D1 database
  const { results } = await env.D1.prepare("SELECT id, name, email FROM users LIMIT 100").all();

  // Cache the result
  await env.KV.put(cacheKey, JSON.stringify(results), {
    expirationTtl: 300, // 5 minutes
  });

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

async function handleData(request: Request, env: Env): Promise<Response> {
  if (request.method === "POST") {
    const data = await request.json();

    // Validate
    if (!data.key || !data.value) {
      return Response.json({ error: "Missing key or value" }, { status: 400 });
    }

    // Store in D1
    await env.D1.prepare("INSERT OR REPLACE INTO data (key, value, updated_at) VALUES (?, ?, ?)")
      .bind(data.key, JSON.stringify(data.value), Date.now())
      .run();

    // Invalidate cache
    await env.KV.delete(`data:${data.key}`);

    return Response.json({ success: true }, { status: 201 });
  }

  return Response.json({ error: "Method not allowed" }, { status: 405 });
}

async function handleStatic(request: Request, env: Env, ctx: ExecutionContext): Promise<Response> {
  const cache = caches.default;

  // Check edge cache
  let response = await cache.match(request);
  if (response) {
    return response;
  }

  // Fetch from origin
  response = await fetch(request);

  // Cache successful responses
  if (response.ok) {
    const cacheResponse = new Response(response.body, response);
    cacheResponse.headers.set("Cache-Control", "public, max-age=86400");
    ctx.waitUntil(cache.put(request, cacheResponse.clone()));
  }

  return response;
}

async function handleOrigin(request: Request, env: Env, ctx: ExecutionContext): Promise<Response> {
  // Implement edge-side includes, personalization, etc.
  const response = await fetch(request);

  // Transform response at the edge
  return new HTMLRewriter()
    .on("head", {
      element(element) {
        element.append('<script>window.EDGE_REGION="' + request.cf?.colo + '"</script>', { html: true });
      },
    })
    .transform(response);
}

// Durable Object for rate limiting
export class RateLimiter implements DurableObject {
  private requests: number[] = [];

  async fetch(request: Request): Promise<Response> {
    const { limit, window } = await request.json();
    const now = Date.now();

    // Clean old requests
    this.requests = this.requests.filter((time) => now - time < window * 1000);

    if (this.requests.length >= limit) {
      return new Response("Rate limited", { status: 429 });
    }

    this.requests.push(now);
    return new Response("OK", { status: 200 });
  }
}
```

```typescript
// Deno Deploy edge function
// main.ts
import { serve } from "https://deno.land/std@0.208.0/http/server.ts";

// Edge KV
const kv = await Deno.openKv();

interface User {
  id: string;
  name: string;
  email: string;
}

async function handler(request: Request): Promise<Response> {
  const url = new URL(request.url);
  const path = url.pathname;

  // CORS headers
  const headers = {
    "Access-Control-Allow-Origin": "*",
    "Access-Control-Allow-Methods": "GET, POST, PUT, DELETE",
    "Content-Type": "application/json",
  };

  // Handle preflight
  if (request.method === "OPTIONS") {
    return new Response(null, { headers });
  }

  try {
    // Route handling
    if (path === "/api/users" && request.method === "GET") {
      return await getUsers(headers);
    }

    if (path === "/api/users" && request.method === "POST") {
      return await createUser(request, headers);
    }

    if (path.match(/^\/api\/users\/[\w-]+$/) && request.method === "GET") {
      const id = path.split("/").pop()!;
      return await getUser(id, headers);
    }

    // Health check
    if (path === "/health") {
      return Response.json(
        {
          status: "healthy",
          region: Deno.env.get("DENO_REGION") || "unknown",
          timestamp: new Date().toISOString(),
        },
        { headers },
      );
    }

    return Response.json({ error: "Not found" }, { status: 404, headers });
  } catch (error) {
    console.error("Error:", error);
    return Response.json({ error: "Internal server error" }, { status: 500, headers });
  }
}

async function getUsers(headers: HeadersInit): Promise<Response> {
  const users: User[] = [];
  const iter = kv.list<User>({ prefix: ["users"] });

  for await (const entry of iter) {
    users.push(entry.value);
  }

  return Response.json(users, { headers });
}

async function getUser(id: string, headers: HeadersInit): Promise<Response> {
  const result = await kv.get<User>(["users", id]);

  if (!result.value) {
    return Response.json({ error: "User not found" }, { status: 404, headers });
  }

  return Response.json(result.value, { headers });
}

async function createUser(request: Request, headers: HeadersInit): Promise<Response> {
  const body = await request.json();

  const user: User = {
    id: crypto.randomUUID(),
    name: body.name,
    email: body.email,
  };

  await kv.set(["users", user.id], user);

  return Response.json(user, { status: 201, headers });
}

serve(handler, { port: 8000 });
```

```typescript
// Vercel Edge Function
// app/api/edge/route.ts
import { NextRequest, NextResponse } from "next/server";
import { geolocation, ipAddress } from "@vercel/edge";

export const runtime = "edge";

export async function GET(request: NextRequest) {
  const geo = geolocation(request);
  const ip = ipAddress(request);

  // Personalization based on location
  const greeting = getLocalizedGreeting(geo.country);

  // Edge caching
  const response = NextResponse.json({
    greeting,
    location: {
      city: geo.city,
      country: geo.country,
      region: geo.region,
    },
    ip,
    timestamp: Date.now(),
  });

  // Cache at edge for 60 seconds
  response.headers.set("Cache-Control", "public, s-maxage=60, stale-while-revalidate=300");

  return response;
}

function getLocalizedGreeting(country: string | undefined): string {
  const greetings: Record<string, string> = {
    US: "Hello!",
    GB: "Hello!",
    ES: "¡Hola!",
    FR: "Bonjour!",
    DE: "Hallo!",
    JP: "こんにちは!",
    CN: "你好!",
  };

  return greetings[country || "US"] || "Hello!";
}

export async function POST(request: NextRequest) {
  const body = await request.json();

  // Process at the edge
  const result = processData(body);

  return NextResponse.json(result, { status: 201 });
}

function processData(data: unknown): unknown {
  // Edge processing logic
  return { processed: true, data };
}
```

```yaml
# Cloudflare Workers wrangler.toml
name = "my-edge-app"
main = "src/worker.ts"
compatibility_date = "2024-01-01"

# KV Namespace
[[kv_namespaces]]
binding = "KV"
id = "abc123..."

# D1 Database
[[d1_databases]]
binding = "D1"
database_name = "my-database"
database_id = "xyz789..."

# Durable Objects
[[durable_objects.bindings]]
name = "RATE_LIMITER"
class_name = "RateLimiter"

[[migrations]]
tag = "v1"
new_classes = ["RateLimiter"]

# Environment variables
[vars]
ENVIRONMENT = "production"

# Secrets (set via wrangler secret put)
# API_KEY

# Routes
[[routes]]
pattern = "api.example.com/*"
zone_name = "example.com"
```

## Best Practices

### Performance

- Minimize cold start time
- Use streaming responses
- Implement edge caching
- Reduce bundle size

### Data Access

- Use edge databases (D1, Deno KV)
- Cache aggressively
- Minimize origin calls
- Handle regional data compliance

### Reliability

- Implement graceful fallbacks
- Monitor edge locations
- Handle rate limiting
- Use circuit breakers

### Security

- Validate at the edge
- Implement auth early
- Use secure headers
- Protect against DDoS

You build low-latency edge applications with proper caching, data locality, and security.