Edge Computing Architecture Patterns for Web Applications

// ❌ Putting everything at the edge without thinking
// Edge functions have time limits, memory limits, and no persistent storage
 
// ✅ Strategic placement based on data and compute needs
interface WorkloadPlacement {
  location: "edge" | "regional" | "origin";
  rationale: string;
  examples: string[];
}
 
const placementStrategy: WorkloadPlacement[] = [
  {
    location: "edge",
    rationale: "Stateless, fast, personalization based on request",
    examples: [
      "A/B test routing",
      "Geolocation-based redirects",
      "Auth token validation",
      "Request header manipulation",
      "Static asset transformation",
    ],
  },
  {
    location: "regional",
    rationale: "Needs data access, moderate compute, regional cache",
    examples: [
      "API responses with regional data",
      "Session management",
      "Rate limiting with shared counters",
      "Search with regional indexes",
    ],
  },
  {
    location: "origin",
    rationale: "Heavy compute, global consistency, complex transactions",
    examples: [
      "Payment processing",
      "Database writes with ACID guarantees",
      "ML model inference (large models)",
      "Report generation",
    ],
  },
];

// Edge function: validate JWT before reaching origin
import { jwtVerify, importSPKI } from "jose";
 
interface EdgeAuthResult {
  authenticated: boolean;
  userId?: string;
  roles?: string[];
  error?: string;
}
 
// Public key cached at edge (rotated via cron)
const PUBLIC_KEY_PEM = `-----BEGIN PUBLIC KEY-----
MIIBIjANBgkqhk...
-----END PUBLIC KEY-----`;
 
async function authenticateAtEdge(
  request: Request
): Promise<EdgeAuthResult> {
  const authHeader = request.headers.get("authorization");
 
  if (!authHeader?.startsWith("Bearer ")) {
    return { authenticated: false, error: "Missing token" };
  }
 
  const token = authHeader.slice(7);
 
  try {
    const publicKey = await importSPKI(PUBLIC_KEY_PEM, "RS256");
    const { payload } = await jwtVerify(token, publicKey, {
      issuer: "https://auth.example.com",
      audience: "https://api.example.com",
    });
 
    return {
      authenticated: true,
      userId: payload.sub,
      roles: payload.roles as string[],
    };
  } catch {
    return { authenticated: false, error: "Invalid token" };
  }
}
 
// Edge handler
export default async function handler(request: Request): Promise<Response> {
  const auth = await authenticateAtEdge(request);
 
  if (!auth.authenticated) {
    return new Response(
      JSON.stringify({ error: auth.error }),
      { status: 401, headers: { "Content-Type": "application/json" } }
    );
  }
 
  // Forward authenticated request to origin with user context
  const originRequest = new Request(request);
  originRequest.headers.set("X-User-Id", auth.userId ?? "");
  originRequest.headers.set("X-User-Roles", (auth.roles ?? []).join(","));
 
  return fetch(originRequest);
}

// ❌ Cache everything with time-based expiry
// Products page shows stale prices for up to 60 seconds
const headers = new Headers();
headers.set("Cache-Control", "public, max-age=60");
 
// ✅ Tag-based cache with instant invalidation
interface CacheEntry {
  response: Response;
  tags: string[];
  createdAt: number;
}
 
class EdgeCache {
  private cache: Map<string, CacheEntry> = new Map();
  private tagIndex: Map<string, Set<string>> = new Map();
 
  async get(key: string): Promise<Response | null> {
    const entry = this.cache.get(key);
    if (!entry) return null;
    return entry.response.clone();
  }
 
  async set(
    key: string,
    response: Response,
    tags: string[]
  ): Promise<void> {
    this.cache.set(key, {
      response: response.clone(),
      tags,
      createdAt: Date.now(),
    });
 
    // Build reverse index: tag → cache keys
    for (const tag of tags) {
      if (!this.tagIndex.has(tag)) {
        this.tagIndex.set(tag, new Set());
      }
      this.tagIndex.get(tag)!.add(key);
    }
  }
 
  async invalidateByTag(tag: string): Promise<number> {
    const keys = this.tagIndex.get(tag);
    if (!keys) return 0;
 
    let invalidated = 0;
    for (const key of keys) {
      this.cache.delete(key);
      invalidated++;
    }
 
    this.tagIndex.delete(tag);
    return invalidated;
  }
}
 
// Usage in edge handler
const cache = new EdgeCache();
 
async function handleProductRequest(
  request: Request
): Promise<Response> {
  const url = new URL(request.url);
  const cacheKey = url.pathname;
 
  const cached = await cache.get(cacheKey);
  if (cached) return cached;
 
  const response = await fetch(request);
 
  // Tag with product ID and category for targeted invalidation
  const productId = url.pathname.split("/").pop();
  await cache.set(cacheKey, response, [
    `product:${productId}`,
    "products-list",
    "storefront",
  ]);
 
  return response;
}
 
// When a product price changes, invalidate just that product
// await cache.invalidateByTag("product:abc123");
// This purges the product page without touching unrelated cache entries

// Edge personalization without origin round trip
interface UserPreferences {
  language: string;
  currency: string;
  theme: "light" | "dark";
  region: string;
}
 
async function personalizeAtEdge(
  request: Request,
  kvStore: KVNamespace
): Promise<Response> {
  const userId = request.headers.get("X-User-Id");
  const geo = request.headers.get("CF-IPCountry") ?? "US";
 
  let preferences: UserPreferences;
 
  if (userId) {
    // Fetch user preferences from edge KV
    const stored = await kvStore.get(`prefs:${userId}`, "json");
    preferences = (stored as UserPreferences) ?? getDefaultPreferences(geo);
  } else {
    preferences = getDefaultPreferences(geo);
  }
 
  // Fetch the page from origin
  const originResponse = await fetch(request);
  const html = await originResponse.text();
 
  // Inject personalization at the edge
  const personalized = html
    .replace("{{LANG}}", preferences.language)
    .replace("{{CURRENCY}}", preferences.currency)
    .replace("{{THEME}}", preferences.theme);
 
  return new Response(personalized, {
    headers: {
      ...Object.fromEntries(originResponse.headers),
      "Content-Type": "text/html",
      "Vary": "X-User-Id",
    },
  });
}
 
function getDefaultPreferences(countryCode: string): UserPreferences {
  const regionMap: Record<string, Partial<UserPreferences>> = {
    US: { language: "en", currency: "USD" },
    GB: { language: "en", currency: "GBP" },
    DE: { language: "de", currency: "EUR" },
    JP: { language: "ja", currency: "JPY" },
  };
 
  return {
    language: "en",
    currency: "USD",
    theme: "light",
    region: countryCode,
    ...regionMap[countryCode],
  };
}
 
interface KVNamespace {
  get(key: string, type: "json"): Promise<unknown>;
}

// Common edge function constraints and workarounds
 
// ❌ Long-running computation at the edge
async function generateReport(data: unknown[]): Promise<Response> {
  // This will hit the 10-50ms CPU time limit on most edge platforms
  const report = heavyComputation(data); // Times out!
  return new Response(report);
}
 
// ✅ Delegate heavy work, respond immediately
async function smartEdgeHandler(request: Request): Promise<Response> {
  const url = new URL(request.url);
 
  // Fast decisions at the edge
  if (url.pathname === "/api/status") {
    return new Response(JSON.stringify({ status: "ok" }), {
      headers: { "Content-Type": "application/json" },
    });
  }
 
  // Geolocation routing
  const country = request.headers.get("CF-IPCountry") ?? "US";
  const regionOrigin = getRegionalOrigin(country);
 
  // Transform and forward to nearest regional server
  const modifiedRequest = new Request(regionOrigin + url.pathname, {
    method: request.method,
    headers: request.headers,
    body: request.body,
  });
 
  return fetch(modifiedRequest);
}
 
function getRegionalOrigin(country: string): string {
  const regions: Record<string, string> = {
    US: "https://us-east.api.example.com",
    CA: "https://us-east.api.example.com",
    GB: "https://eu-west.api.example.com",
    DE: "https://eu-west.api.example.com",
    JP: "https://ap-northeast.api.example.com",
    AU: "https://ap-southeast.api.example.com",
  };
  return regions[country] ?? regions.US;
}