Edge Computing: Bringing Serverless Closer to Users

Edge computing moves computation closer to end users, dramatically reducing latency. This guide explores edge platforms, use cases, and implementation patterns.

Understanding Edge Computing#

Traditional cloud functions run in specific regions. Edge functions run globally, close to your users:

Traditional:     User (Tokyo) ──────────────────> Server (US-East)
                               ~200ms latency

Edge:            User (Tokyo) ──> Edge Node (Tokyo)
                               ~20ms latency

Edge Platforms Compared#

Cloudflare Workers#

// worker.js
export default {
  async fetch(request, env, ctx) {
    const url = new URL(request.url);

    // Handle API routes
    if (url.pathname.startsWith('/api/')) {
      return handleAPI(request, env);
    }

    // Serve static assets from R2
    return env.ASSETS.fetch(request);
  },
};

async function handleAPI(request, env) {
  const data = await env.KV.get('cached-data', 'json');

  if (!data) {
    // Fetch from origin and cache
    const fresh = await fetch('https://api.origin.com/data');
    const json = await fresh.json();
    await env.KV.put('cached-data', JSON.stringify(json), {
      expirationTtl: 3600,
    });
    return Response.json(json);
  }

  return Response.json(data);
}

Vercel Edge Functions#

// app/api/location/route.ts
import { geolocation } from '@vercel/functions';
import { NextResponse } from 'next/server';

export const runtime = 'edge';

export async function GET(request: Request) {
  const geo = geolocation(request);

  return NextResponse.json({
    country: geo.country,
    city: geo.city,
    region: geo.region,
    latitude: geo.latitude,
    longitude: geo.longitude,
  });
}

Deno Deploy#

// main.ts
Deno.serve(async (request: Request) => {
  const url = new URL(request.url);

  if (url.pathname === '/api/time') {
    return Response.json({
      timestamp: Date.now(),
      region: Deno.env.get('DENO_REGION'),
    });
  }

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

Common Edge Use Cases#

1. Geolocation-Based Routing#

export default {
  async fetch(request) {
    const country = request.cf.country;

    const priceMap = {
      US: { currency: 'USD', modifier: 1 },
      GB: { currency: 'GBP', modifier: 0.79 },
      EU: { currency: 'EUR', modifier: 0.92 },
      JP: { currency: 'JPY', modifier: 149.5 },
    };

    const pricing = priceMap[country] || priceMap.US;

    return Response.json({
      country,
      pricing,
    });
  },
};

2. A/B Testing at the Edge#

export default {
  async fetch(request, env) {
    const url = new URL(request.url);

    // Consistent bucketing based on user ID
    const userId = request.headers.get('x-user-id') ||
                   crypto.randomUUID();

    const bucket = hashToBucket(userId, 2); // 0 or 1

    // Rewrite to variant
    if (url.pathname === '/landing') {
      url.pathname = bucket === 0 ? '/landing-a' : '/landing-b';
    }

    const response = await fetch(url.toString());
    const newResponse = new Response(response.body, response);

    // Track variant for analytics
    newResponse.headers.set('x-variant', bucket.toString());

    return newResponse;
  },
};

function hashToBucket(str, buckets) {
  let hash = 0;
  for (let i = 0; i < str.length; i++) {
    hash = ((hash << 5) - hash) + str.charCodeAt(i);
    hash = hash & hash;
  }
  return Math.abs(hash) % buckets;
}

3. Authentication at the Edge#

import { jwtVerify } from 'jose';

export const runtime = 'edge';

export async function middleware(request: Request) {
  const token = request.headers.get('authorization')?.split(' ')[1];

  if (!token) {
    return new Response('Unauthorized', { status: 401 });
  }

  try {
    const secret = new TextEncoder().encode(process.env.JWT_SECRET);
    const { payload } = await jwtVerify(token, secret);

    // Add user info to headers for downstream
    const requestHeaders = new Headers(request.headers);
    requestHeaders.set('x-user-id', payload.sub as string);
    requestHeaders.set('x-user-role', payload.role as string);

    return NextResponse.next({
      request: { headers: requestHeaders },
    });
  } catch {
    return new Response('Invalid token', { status: 401 });
  }
}

4. Image Optimization#

export default {
  async fetch(request, env) {
    const url = new URL(request.url);

    if (!url.pathname.startsWith('/images/')) {
      return fetch(request);
    }

    // Parse optimization params
    const width = url.searchParams.get('w') || 'auto';
    const quality = url.searchParams.get('q') || '80';
    const format = request.headers.get('accept')?.includes('webp')
      ? 'webp'
      : 'jpeg';

    // Use Cloudflare Image Resizing
    return fetch(url.origin + url.pathname, {
      cf: {
        image: {
          width: parseInt(width) || undefined,
          quality: parseInt(quality),
          format,
        },
      },
    });
  },
};

5. Rate Limiting#

export default {
  async fetch(request, env) {
    const ip = request.headers.get('cf-connecting-ip');
    const key = `ratelimit:${ip}`;

    // Use Durable Objects for accurate counting
    const id = env.RATE_LIMITER.idFromName(key);
    const limiter = env.RATE_LIMITER.get(id);

    const allowed = await limiter.fetch(request.url).then(r => r.json());

    if (!allowed.success) {
      return new Response('Too Many Requests', {
        status: 429,
        headers: {
          'Retry-After': allowed.retryAfter.toString(),
        },
      });
    }

    return fetch(request);
  },
};

// Durable Object for rate limiting
export class RateLimiter {
  constructor(state, env) {
    this.state = state;
    this.requests = [];
  }

  async fetch(request) {
    const now = Date.now();
    const windowMs = 60000; // 1 minute
    const maxRequests = 100;

    // Clean old requests
    this.requests = this.requests.filter(t => now - t < windowMs);

    if (this.requests.length >= maxRequests) {
      const oldestRequest = this.requests[0];
      const retryAfter = Math.ceil((oldestRequest + windowMs - now) / 1000);

      return Response.json({ success: false, retryAfter });
    }

    this.requests.push(now);
    return Response.json({ success: true, remaining: maxRequests - this.requests.length });
  }
}

Edge Data Storage#

KV Storage (Key-Value)#

// Write
await env.MY_KV.put('user:123', JSON.stringify({ name: 'John' }), {
  expirationTtl: 86400, // 24 hours
  metadata: { createdAt: Date.now() },
});

// Read
const value = await env.MY_KV.get('user:123', 'json');
const { value: data, metadata } = await env.MY_KV.getWithMetadata('user:123', 'json');

// List
const list = await env.MY_KV.list({ prefix: 'user:' });

Durable Objects (Stateful)#

export class Counter {
  constructor(state, env) {
    this.state = state;
  }

  async fetch(request) {
    const url = new URL(request.url);
    let value = (await this.state.storage.get('count')) || 0;

    switch (url.pathname) {
      case '/increment':
        value++;
        await this.state.storage.put('count', value);
        break;
      case '/decrement':
        value--;
        await this.state.storage.put('count', value);
        break;
    }

    return Response.json({ count: value });
  }
}

D1 (SQLite at the Edge)#

export default {
  async fetch(request, env) {
    const { results } = await env.DB.prepare(
      'SELECT * FROM products WHERE category = ?'
    ).bind('electronics').all();

    return Response.json(results);
  },
};

Edge Limitations#

Understanding constraints is crucial:

Constraint	Cloudflare	Vercel Edge	Deno Deploy
CPU time	10-50ms	25s	50ms
Memory	128MB	128MB	512MB
Bundle size	1MB	2MB	No limit
Subrequests	50	25	1000

Working Within Limits#

// Streaming for large responses
export default {
  async fetch(request) {
    const { readable, writable } = new TransformStream();

    // Don't await - start streaming immediately
    streamData(writable);

    return new Response(readable, {
      headers: { 'Content-Type': 'application/json' },
    });
  },
};

async function streamData(writable) {
  const writer = writable.getWriter();
  const encoder = new TextEncoder();

  writer.write(encoder.encode('['));

  for (let i = 0; i < 1000; i++) {
    const data = await fetchItem(i);
    const separator = i > 0 ? ',' : '';
    writer.write(encoder.encode(separator + JSON.stringify(data)));
  }

  writer.write(encoder.encode(']'));
  writer.close();
}

Deployment Workflow#

# .github/workflows/edge-deploy.yml
name: Deploy to Edge

on:
  push:
    branches: [main]

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4

      - name: Deploy to Cloudflare Workers
        uses: cloudflare/wrangler-action@v3
        with:
          apiToken: ${{ secrets.CF_API_TOKEN }}

      - name: Smoke Test
        run: |
          response=$(curl -s -o /dev/null -w "%{http_code}" https://api.example.com/health)
          if [ "$response" != "200" ]; then
            echo "Health check failed"
            exit 1
          fi

Monitoring Edge Functions#

// Structured logging
export default {
  async fetch(request, env, ctx) {
    const start = Date.now();

    try {
      const response = await handleRequest(request, env);

      ctx.waitUntil(log(env, {
        type: 'request',
        path: new URL(request.url).pathname,
        status: response.status,
        duration: Date.now() - start,
        colo: request.cf.colo,
      }));

      return response;
    } catch (error) {
      ctx.waitUntil(log(env, {
        type: 'error',
        message: error.message,
        stack: error.stack,
      }));

      return new Response('Internal Error', { status: 500 });
    }
  },
};

Edge computing enables ultra-low latency for global users. Start with simple use cases like geolocation or caching, then expand to more complex patterns as you understand the constraints. The key is knowing when edge makes sense versus traditional serverless.