---
title: "Edge-Side Personalization"
category: studio-standards
status: optional
url: https://webspecification.com/spec/studio-standards/edge-side-personalization/
source_repo: undefined
licence: CC-BY-4.0
---

# Edge-Side Personalization

> Handling geo-routing and state modifications directly at the CDN Edge.

## What is it?

Executing application logic (like determining user language, checking A/B test buckets, or verifying authentication state) on the CDN Edge node closest to the user, and modifying the HTML response before it ever reaches the browser.

## Why does it matter?

Traditionally, personalization happens on the client: the browser loads the page, executes a script to check the user's location, and then updates the DOM to show the correct currency. This causes a jarring flash of unpersonalized content and ruins Cumulative Layout Shift (CLS). By doing this at the Edge, the browser receives the perfectly personalized HTML instantly.

## How to implement it

### 1. Edge Middleware
Use platforms like Cloudflare Workers or Vercel Edge Middleware to intercept the request.

```typescript
// Vercel Middleware Example
import { NextResponse } from 'next/server';

export function middleware(request) {
  const country = request.geo?.country || 'US';
  const url = request.nextUrl.clone();
  
  // Rewrite the request to the specific localized static page
  url.pathname = `/${country}${url.pathname}`;
  return NextResponse.rewrite(url);
}
```

## Verification

- Inspect the initial raw HTML payload returned in the DevTools Network tab. The content must reflect the personalized state (e.g., correct currency) directly in the source code, without requiring JavaScript execution.