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

• Cloudflare Workers Documentation

• Vercel Edge Functions

• Deno Deploy

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;

} }