# Edge Computing & Rendering

> Run code at CDN PoPs to cut latency before origin is hit.

Frontend architecture guidance from fearchitect, written by Abas Turabli and last reviewed 2026-06-21. Source: https://fearchitect.com/topics/edge-computing-rendering

Use it as reference for the task at hand. Before changing code, check this guidance against the codebase: where the code already makes a different, deliberate choice, flag the conflict instead of rewriting it. Library APIs move faster than this guide, so confirm exact signatures in the official docs linked at the end.

## Summary

Edge compute (Cloudflare Workers, Vercel Edge Functions) executes JavaScript in V8 isolates at CDN points of presence, often 10–50 ms from the user. The model cuts round-trip time for auth, personalisation, and SSR — but isolates lack Node.js APIs and cold data must still travel to the origin.

## Definition

Edge compute runs JavaScript (and WASM) in **V8 isolates** — not Node.js processes — at CDN points of presence (PoPs) worldwide. Isolates start in under 5 ms with no cold-start penalty, but they trade Node APIs (no `fs`, no native bindings) for near-zero spin-up cost.

Vercel calls its layer **Edge Functions** (deployed via `export const runtime = "edge"`) and **Routing Middleware** (the `middleware.ts` file that runs before every request). Cloudflare calls the equivalent a **Worker**. Both give you `Request`/`Response` (the Fetch API), `crypto`, streaming, and `geo` headers — not the full Node standard library.

## Edge vs. origin runtime

| Dimension | Edge (V8 isolate) | Origin (Node.js / container) |
| --- | --- | --- |
| **Cold start** | < 5 ms — isolates are shared | 50–500 ms for a fresh container |
| **Latency to user** | 10–50 ms — nearest PoP | 100–400 ms — single region |
| **Runtime APIs** | Fetch, Web Crypto, Streams, KV | Full Node.js + native modules |
| **CPU time limit** | 50 ms (Vercel) / 30 s (CF) | No hard cap per request |
| **Database access** | Round-trip to origin region | Local — same VPC or loopback |
| **Best for** | Auth, personalisation, A/B, geo | Heavy DB queries, file I/O |

## Routing Middleware: geolocation redirect

Vercel Middleware runs at the edge before a request reaches any page or API. The `geo` object on `NextRequest` is populated by Vercel's infrastructure — no third-party lookup needed.

**middleware.ts — country-based redirect**

```ts
// middleware.ts (project root — not inside /app or /pages)
import { NextResponse } from "next/server";
import type { NextRequest } from "next/server";

export function middleware(request: NextRequest) {
  const country = request.geo?.country ?? "US";

  // Personalise: send EU users to /eu landing page
  if (country === "DE" || country === "FR") {
    const url = request.nextUrl.clone();
    url.pathname = "/eu" + url.pathname;
    return NextResponse.rewrite(url);
  }

  return NextResponse.next();
}

export const config = {
  // Run only on marketing pages, skip _next assets
  matcher: ["/((?!_next|favicon.ico).*)"],
};
```

No origin hit for the redirect decision. `request.geo` is injected by Vercel's edge layer. Keep middleware under 1 MB and avoid DB calls here — use KV or a cookie for pre-resolved state.

## Diagram

```mermaid
sequenceDiagram
  participant User
  participant Edge as Edge PoP
  participant KV as Edge KV
  participant Origin

  User->>Edge: GET /dashboard
  Edge->>KV: Read session token
  alt Token valid + data cached
    KV-->>Edge: Session + cached HTML
    Edge-->>User: Streamed response (~20 ms)
  else Cache miss
    KV-->>Edge: Session only
    Edge->>Origin: Fetch user data
    Origin-->>Edge: JSON
    Edge-->>User: Rendered + streamed HTML
  end
```

Edge reads session from KV; only a cache miss reaches the origin region.

## When edge helps — and when it does not

**Pros**

- Geolocation and A/B decisions in < 5 ms with no origin round-trip.
- Auth token verification (JWT, signed cookie) is pure CPU — ideal for isolates.
- Streaming edge SSR starts sending HTML bytes before origin data returns.
- No cold-start tax: isolates are always warm at busy PoPs.

**Cons**

- Every DB query adds a cross-region round-trip, erasing latency gains.
- No Node.js native modules — drivers for Postgres, Redis need HTTP/WebSocket wrappers.
- CPU time limits (50 ms on Vercel) block long-running or CPU-heavy work.
- Debugging is harder — no local parity for the real PoP network topology.
- Stateful session stores must be edge-replicated (e.g., Upstash Redis) to avoid centrality.

## Decision: The data locality test

Before moving logic to the edge, ask: where does the data live? If it is in a single-region Postgres, the edge function must still phone home — you gain nothing on latency and lose Node.js APIs. Edge wins when data is in an edge KV store, a cookie, or a short-TTL CDN cache already at the PoP.

## Key terms

- **V8 isolate**: A sandboxed JS execution context inside a single V8 process; no OS process overhead, starts in microseconds.
- **Edge Function**: Vercel's name for a serverless function running in V8 isolates at CDN PoPs, using the Web API surface.
- **Routing Middleware**: Vercel's `middleware.ts` — runs at the edge on every matched request before any page handler.
- **PoP**: Point of Presence: a CDN datacenter geographically close to users where edge code runs.
- **Edge KV**: A globally replicated key-value store (e.g., Cloudflare KV, Vercel KV) readable from edge code without a round-trip to the origin region.

## Related topics

- [CDN & Edge Caching](https://fearchitect.com/topics/cdn-edge-caching.md): Serve cached responses from PoPs near users, sparing the origin.
- [Caching Strategies](https://fearchitect.com/topics/caching-strategies.md): Layer browser, CDN, and app caches to serve responses without re-fetching.
- [Streaming SSR](https://fearchitect.com/topics/streaming-ssr.md): Flush the HTML shell immediately, then stream the rest as Suspense resolves.
- [Network Performance](https://fearchitect.com/topics/network-performance.md): Hint, prioritize, and pre-navigate to cut request latency.
- [API Gateway (for Frontends)](https://fearchitect.com/topics/api-gateway.md): Single entry point that routes, authenticates, and rate-limits across services.
- [Containers & Kubernetes](https://fearchitect.com/topics/containers-kubernetes.md): Package apps in containers; orchestrate them with Kubernetes.

## Further reading

- [Vercel — Edge Middleware](https://vercel.com/docs/functions/edge-middleware)
- [Vercel — Edge Functions overview](https://vercel.com/docs/functions/edge-functions)
- [Cloudflare Workers — How Workers work](https://developers.cloudflare.com/workers/reference/how-workers-works/)
- [Next.js — Middleware docs](https://nextjs.org/docs/app/building-your-application/routing/middleware)