edge-computing-patterns（边缘计算模式）

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

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

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

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;
  }
}