What Are Edge Functions and When Should You Use Them?

The Computer Next Door

Imagine you're in Toronto and you open a website hosted in California. Your request travels across thousands of miles of cables and servers before it even reaches the computer that has the answer. That takes time — usually a quarter to half a second. For a lot of things, that's fine. But what if you needed the answer faster?

Edge functions solve this by putting tiny pieces of code in dozens of computers spread across the world, close to wherever people are. Instead of your request going all the way to one distant server, it goes to the nearest one. In Toronto, it hits a server in Montreal or maybe Toronto itself. In Tokyo, it hits a server in Tokyo. The computer doing the work is always the one closest to you.

Think of it like ordering from a restaurant across the country versus one on your block. Both can make the same food. But the one on your block delivers in ten minutes. The distant one takes forty-five and the food arrives cold.

Speed Changes Everything

Half a second doesn't sound like a lot. But research shows that every 100 milliseconds of delay can drop user engagement by a noticeable amount. People notice slow. They click away. They don't come back.

For a simple blog or static page, this doesn't matter much. But for anything that feels alive — a chat app, a live dashboard, a personalized recommendation — slow feels broken. Edge functions fix that by cutting the travel time down to almost nothing.

Beyond speed, edge functions also reduce the load on your main server. Instead of your one server handling every request, dozens of edge servers share the weight. That means your app stays fast even when lots of people show up at once.

From Request to Response

Here's how an edge function call flows, step by step:

Personalizing Content by Country

One of the most common edge function tasks is reading a user's location and personalizing what they see. Here's a simple example of an edge function that shows a different headline based on where the visitor is:

// This code runs on a server close to the user, not your main server
export function handleRequest(request) {
  // Get the country the user is in (stored in request headers by the CDN)
  const country = request.headers.get('cf-ipcountry') || 'US';

  // Pick a headline based on their location
  const headlines = {
    'GB': 'Welcome to the UK version',
    'FR': 'Bienvenue — French version',
    'DE': 'Willkommen — German version',
  };

  const headline = headlines[country] || 'Welcome to our site';

  // Return the personalized HTML instantly from the nearest server
  return new Response(`<h1>${headline}</h1>`, {
    headers: { 'Content-Type': 'text/html' }
  });
}

Without an edge function, you'd have to make the user's browser wait while your main server figured out where they were from. With an edge function, the answer is ready before the request even gets close to your main servers. The user sees the right headline almost instantly.

Knowledge Check

Test what you learned with this quick quiz.