Edge Rendering

Render Where Your Users Are

Traditional servers live in one or a few data centers. A user in Tokyo requesting a page from a server in Virginia adds ~150ms of network latency — just for the round trip. Edge rendering moves the server closer to the user by executing code on CDN edge nodes distributed globally.

Instead of one server in Virginia, you have 200+ micro-servers worldwide. The user in Tokyo hits an edge node in Tokyo. The user in Berlin hits an edge node in Frankfurt. The round-trip drops from 150ms to 10ms.

V8 Isolates: Not Containers, Not VMs

Edge runtimes don't use containers or VMs. They use V8 isolates — lightweight execution environments within Google's V8 JavaScript engine.

A V8 isolate is a sandboxed instance of V8 with its own heap and execution context. Thousands of isolates can share a single process, each completely isolated from the others.

Traditional Server:
  VM or Container → Node.js process → your code
  Cold start: 500ms - 5s
  Memory: 128MB - 1GB per instance

Edge Runtime (V8 Isolate):
  Single V8 process → thousands of isolates → your code
  Cold start: <5ms
  Memory: ~128KB per isolate

The cold start difference is dramatic. A container-based serverless function (AWS Lambda) can take 500ms-5s to cold start. A V8 isolate cold starts in under 5 milliseconds. For SSR on the edge, this means the first request to a region has nearly zero overhead.

What Edge Runtimes Can and Cannot Do

Edge runtimes are not Node.js. They implement a subset of Web APIs — closer to a Service Worker than a server.

What you have:

• fetch() — HTTP requests
• Request / Response — standard web APIs
• URL, URLSearchParams
• TextEncoder / TextDecoder
• crypto.subtle — Web Crypto API
• ReadableStream / WritableStream
• setTimeout / setInterval (with limits)
• Headers, FormData, Blob
• WebAssembly

What you don't have:

• fs — no file system access
• child_process — no spawning processes
• net, dgram — no raw sockets
• node:buffer module import — though the global Buffer is available on platforms like Vercel Edge Runtime
• Most Node.js built-in modules
• Native addons (C/C++ modules)
• Long-running connections (WebSocket limitations vary)

export const runtime = 'edge'

export default async function handler(request: Request) {
  const data = await fetch('https://api.example.com/data')
  const json = await data.json()

  return new Response(JSON.stringify(json), {
    headers: { 'Content-Type': 'application/json' }
  })
}

This works on the edge because it only uses fetch, Request, Response, and JSON — all standard web APIs.

import { readFile } from 'fs/promises'

export const runtime = 'edge'

export default async function handler() {
  const data = await readFile('./data.json', 'utf-8')
  return new Response(data)
}

This fails on the edge. No fs module. If your code needs the file system, you need the Node.js runtime.

Edge Use Cases

1. Middleware: Auth, Redirects, A/B Testing

The highest-value edge use case. Middleware runs before any rendering, making decisions at the edge:

import { NextResponse } from 'next/server'
import type { NextRequest } from 'next/server'

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

  if (country === 'DE') {
    return NextResponse.redirect(new URL('/de', request.url))
  }

  const bucket = request.cookies.get('ab-test')?.value
  if (!bucket) {
    const newBucket = Math.random() < 0.5 ? 'control' : 'variant'
    const response = NextResponse.next()
    response.cookies.set('ab-test', newBucket)
    return response
  }

  return NextResponse.next()
}

This middleware runs on every request, globally, in under 5ms. It handles geo-based redirects and A/B test bucketing before the page even starts rendering.

2. Edge SSR: Render Close to the User

For dynamic pages where TTFB matters, edge SSR renders HTML at the nearest edge node:

export const runtime = 'edge'

export default async function Page() {
  const data = await fetch('https://api.example.com/products', {
    next: { revalidate: 60 }
  })
  const products = await data.json()

  return (
    <main>
      <h1>Products</h1>
      {products.map(p => <ProductCard key={p.id} {...p} />)}
    </main>
  )
}

The page renders at the edge, fetching data from the API. If the API is also globally distributed, the total latency is minimal.

3. Personalization at the Edge

Combine edge rendering with cookies or headers for lightweight personalization without a full origin server round trip:

export const runtime = 'edge'

export default async function Page() {
  const headersList = await headers()
  const locale = headersList.get('accept-language')?.split(',')[0] || 'en'

  const content = await fetch(`https://cms.example.com/home?locale=${locale}`)

  return <HomePage content={await content.json()} />
}

The Edge Platform Landscape

When to Use Edge vs Node.js