Edge Rendering with Next.js and Cloudflare Workers

Traditional server-side rendering runs on a single origin server. A user in Sydney requesting a page rendered in Virginia adds 200ms+ of latency just from the round trip. Edge rendering eliminates that by running your server logic on nodes distributed worldwide.

I implemented this with Next.js and Cloudflare Workers. Here's what I learned.

Why Edge Rendering

• Lower latency: Server logic runs on the nearest edge node — typically within 50ms of any user.
• Dynamic personalization: You can tailor responses based on geolocation, device, or cookies without a round trip to your origin.
• Reduced origin load: Edge nodes handle the heavy lifting. Your central server stays focused on API and data layer.

Getting Started

You need Next.js 12+ for middleware support. Middleware is the key primitive — it runs before a request completes and can be deployed to the edge.

Step 1: Create a Next.js Project

npx create-next-app@latest next-edge-example
cd next-edge-example
npm install

Step 2: Add Edge Middleware

Create middleware.ts in your project root:

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

export const config = {
  matcher: '/',
}

export function middleware(request: NextRequest) {
  const country = request.geo?.country || 'US'
  const response = NextResponse.next()
  response.headers.set('x-user-country', country)
  return response
}

This runs on every request to /, reads the user's country from the edge node's geolocation data, and sets a header. No origin server involved.

Step 3: Deploy to Cloudflare Workers

Use @cloudflare/next-on-pages or Vercel's edge runtime to deploy. Cloudflare Workers run on 300+ locations worldwide.

npm install -D @cloudflare/next-on-pages

Configure your wrangler.toml and deploy:

npx wrangler deploy

What You Can Do at the Edge

• A/B testing: Route users to different variants without client-side flicker.
• Auth checks: Validate tokens before the page even starts rendering.
• Geo-redirects: Send users to region-specific content automatically.
• Bot detection: Block or challenge suspicious traffic before it hits your origin.

The Trade-offs

Benefits: Dramatically lower TTFB for global users. Dynamic responses without the cold-start penalties of traditional serverless functions.

Costs: Edge runtimes have constraints. No Node.js APIs — no fs, no native modules. Limited execution time. Cloudflare Workers have a 10ms CPU time limit on the free plan. You're writing for a stripped-down JavaScript runtime, not full Node.js.

When to use it: When your users are globally distributed and you need dynamic server-side logic with low latency. For a single-region app with a fast origin, edge rendering adds complexity without proportional benefit.