Edge Computing Patterns

Overview

Edge computing runs code closer to users worldwide, reducing latency from seconds to milliseconds. This skill covers Cloudflare Workers, Vercel Edge Functions, and Deno Deploy patterns for building globally distributed applications.

When to use this skill:

Global applications requiring <50ms latency
Authentication/authorization at the edge
A/B testing and feature flags
Geo-routing and localization
API rate limiting and DDoS protection
Transforming responses (image optimization, HTML rewriting)

Platform Comparison

Feature	Cloudflare Workers	Vercel Edge	Deno Deploy
Cold Start	<1ms	<10ms	<10ms
Locations	300+	100+	35+
Runtime	V8 Isolates	V8 Isolates	Deno
Max Duration	30s (paid: unlimited)	25s	50ms-5min
Free Tier	100k req/day	100k req/month	100k req/month

Platform-Specific Implementation

For detailed code examples and patterns, load the appropriate reference file:

Cloudflare Workers

Reference: references/cloudflare-workers.md

Worker fetch handlers and routing
KV storage patterns (eventually consistent)
Durable Objects for stateful edge
Wrangler CLI and wrangler.toml configuration
Caching strategies with Cache API

Vercel Edge Functions

Reference: references/vercel-edge.md

Edge Middleware for Next.js (auth, A/B testing, geo-routing)
Edge API routes with streaming
Edge Config for feature flags
Geolocation-based routing patterns

Runtime Differences

Reference: references/runtime-differences.md

Node.js APIs NOT available at edge
Web API compatibility matrix
Polyfill strategies for crypto, Buffer, streams

Edge Runtime Constraints

Available APIs:

fetch, Request, Response, Headers
URL, URLSearchParams
TextEncoder, TextDecoder
ReadableStream, WritableStream
crypto, SubtleCrypto (Web Crypto API)
Web APIs (atob, btoa, setTimeout, etc.)

NOT Available:

Node.js APIs (fs, path, child_process)
Native modules and binary dependencies
File system access
Some npm packages with Node.js dependencies

Common Patterns Summary

Authentication at Edge

Verify JWT tokens at edge for sub-millisecond auth checks. See references/cloudflare-workers.md for implementation.

Rate Limiting

Use KV (Cloudflare) or Edge Config (Vercel) for distributed rate limiting. Pattern: IP-based key with TTL expiration.

Edge Caching

Cache API with cache-aside pattern. Check cache first, fetch origin on miss, store with TTL.

A/B Testing

Assign users to buckets via cookie, rewrite URLs to variant pages. See references/vercel-edge.md for middleware pattern.

Geo-Routing

Access request.cf.country (Cloudflare) or request.geo (Vercel) for location-based routing.

Best Practices

Keep bundles small (<1MB compressed)
Use streaming for large responses to avoid timeouts
Leverage platform caching (KV, Durable Objects, Edge Config)
Handle errors gracefully (edge errors cannot be recovered)
Test cold starts and warm starts separately
Monitor edge function performance and error rates
Use environment variables for secrets (never hardcode)
Implement proper CORS headers for cross-origin requests

Decision Guide

Use Case	Recommended Platform
Global CDN + compute	Cloudflare Workers
Next.js middleware	Vercel Edge
TypeScript-first	Deno Deploy
Stateful edge	Cloudflare Durable Objects
Feature flags	Vercel Edge Config
Real-time collaboration	Cloudflare Durable Objects + WebSockets

Resources

Related Skills

caching-strategies - Redis caching patterns that complement edge KV storage and CDN caching
react-server-components-framework - Next.js App Router patterns for edge-rendered React components
streaming-api-patterns - SSE and streaming responses for edge function output
api-design-framework - REST API patterns for edge-deployed endpoints

Key Decisions

Decision	Choice	Rationale
Primary Runtime	V8 Isolates	Sub-millisecond cold starts, security isolation
State Management	KV / Edge Config	Eventually consistent, globally replicated
Stateful Workloads	Durable Objects	Strong consistency when needed
Auth Strategy	JWT at Edge	No origin roundtrip, sub-ms verification
Cache Pattern	Cache-Aside	Simple, effective, CDN-compatible

Capability Details

cloudflare-workers

Keywords: cloudflare, workers, kv, durable objects, r2, wrangler Reference: references/cloudflare-workers.md Solves:

How do I deploy to Cloudflare Workers?
Cloudflare KV storage patterns
Durable Objects for stateful edge
Wrangler CLI usage and configuration

vercel-edge

Keywords: vercel edge, edge functions, edge middleware, geolocation, next.js Reference: references/vercel-edge.md Solves:

How do I use Vercel Edge Functions?
Edge middleware patterns (auth, A/B testing)
Geo-based routing and localization
Edge streaming responses

runtime-differences

Keywords: edge runtime, web apis, node.js compatibility, polyfills Reference: references/runtime-differences.md Solves:

What Node.js APIs are NOT available at edge?
Edge-compatible alternatives to Node APIs
How to polyfill crypto, base64, buffers
Package compatibility for edge runtimes

edge-caching

Keywords: edge cache, cdn, cache-control, stale-while-revalidate, invalidation Solves:

How do I cache at the edge?
CDN caching strategies and headers
Stale-while-revalidate patterns
Cache invalidation strategies
Personalization at edge

edge-function-template

Keywords: edge function, template, boilerplate, production-ready Solves:

How do I structure an edge function?
Production-ready edge function template
Error handling and validation patterns
CORS, rate limiting, caching setup

edge-middleware-template

Keywords: middleware, next.js, authentication, a/b testing Solves:

How do I write Next.js edge middleware?
Authentication middleware patterns
A/B testing and feature flags
Geolocation routing middleware

deployment-checklist

Keywords: deployment, checklist, production, monitoring Reference: checklists/edge-deployment-checklist.md Solves:

What should I check before deploying to edge?
Edge deployment best practices
Production readiness checklist
Monitoring and debugging setup

Quick Example

// Cloudflare Worker - Basic fetch handler
export default {
  async fetch(request: Request): Promise<Response> {
    const url = new URL(request.url);

    // Geo-based routing
    const country = request.cf?.country || 'US';

    // Edge caching
    const cacheKey = url.pathname + "-" + country;
    const cached = await caches.default.match(cacheKey);
    if (cached) return cached;

    const response = await fetch(request);
    return response;
  }
}

edge-computing-patterns