Guides & Tutorials

Understanding Edge Functions: The Edge and Beyond

Guides & Tutorials

Understanding Edge Functions: The Edge and Beyond

Edge computing is nothing new. But more so than ever before, it’s accessible to all developers with just a few lines of code. The recent rise in edge function offerings, whether provided by edge-first JavaScript frameworks, CDNs, or web development platforms, puts the power of edge computing in the hands of every developer.

In this blog post, we’ll dive into the main benefits of edge functions, some popular use cases, and how to get started with them on Netlify.

What are Edge Functions?

Edge Functions allow you to serve content from the CDN server closest to the user. With just a bit of JavaScript or TypeScript, developers can use edge functions to modify network requests at the edge so it’s closer to your site visitors around the globe. This gives developers the power to localize content, present relevant ads, authenticate visitors, A/B test content, and so much more. And since this all happens at the edge — the worldwide location closest to the requesting user – edge functions also reduce latency.

Edge Functions vs Serverless Functions

As Salma Alam-Naylor puts it in her succinct definition of edge functions, “Edge functions are serverless functions run at the Edge.” It’s a simple description, but one that requires some background knowledge on serverless functions and edge networks. (Salma explains both in her excellent blog post, but we’ll summarize below).

Serverless functions made it possible to focus solely on the code. Since serverless functions are executed on demand, developers didn’t have to worry about provisioning their own servers, or scaling their application to meet traffic spikes. But historically, serverless functions have only been available in broad geographic regions, like us-east-1.

Edge functions give developers additional powers to execute serverless functions not within a broad region, but in the location closest to the user’s request. They automatically route data not just to a geographic region, but to the very node closest to your user. This allows you to deliver content to users with a fast and personalized experience, and is a major advantage for developers, for a bunch of reasons.

Benefits of Edge Functions

The immediate benefits that are associated with edge functions include, but are not limited to:

Decreased latency: Running logic closer to the end user can reduce not only the volume of data, but the distance that data needs to travel. If a user were sending a request in Arizona, a response time from a local node would be lower than one in London.
Reduction in cold start boot times: For serverless functions, cold start boot times average anywhere from 50-500ms on average. Take into consideration, research shows that the new standard for 2022 for the time an online shopper will wait for your page to load is 2-3 seconds. The cold start average for edge functions, on the other hand, is drastically reduced (50-200ms).
Added functionality: Edge functions also enable all kinds of functionality to applications and websites – see some common examples below.

Example Edge Functions Use Cases

Edge functions can transform specific pieces of data at the edge, which unlocks all kinds of new functionality (and some functionality we’re all accustomed to by now, but without the client-side JavaScript).

Some common examples include:

Conditional routing: Redirect your users to other routes or even sites based on their cookies, request headers, geolocation, and more.
Adding a custom HTTP response header: Arbitrarily add to or modify response headers before they’re sent back to your customer’s browser.
A/B testing: Split traffic between different routes, or integrate with your A/B analytics platform.
Setting a cookie: Set a cookie value in your user’s browser.
Personalizing by geolocation: Want to change something on your site based on where the user is located? Edge functions can serve location-specific content and personalize a user’s experience based on where they are in the world.
Authentication: Conditionally require auth from your OAuth provider of choice for specific routes or your entire site.

Explore our library of Edge Functions examples in use →

Functions Can Run Your Whole App at the Edge

In addition to just running specific functions at the edge, it’s also possible to deploy an entire application at the edge, by deploying all business logic to an edge function.

This awesome Wordle clone by GitHub user @BenDMyers is a great example of an entire application running on the edge using the 11ty framework.

Since all of the business logic is deployed to an edge function, when the user sends a request to a node, it's the function that determines how to respond to the browser.

Using Edge Functions with Netlify

Netlify Edge Functions connect the Netlify platform and workflow with an open runtime standard at the network edge. This enables you to build fast, personalized web experiences with an ecosystem of development tools. Network modification requests are done using JavaScript or TypeScript to localize content, serve relevant ads, authenticate visitors, A/B test content, and much more.

Netlify Edge Functions are built on Deno, an open source, standards-based runtime, which means it works out-of-the-box with web frameworks that support these capabilities. Deno does not use Node modules, or support Node APIs, but instead can load modules directly from URLs.

Because Edge Functions are available from the Netlify platform, your function code is written alongside your frontend code – no context switching necessary.

JavaScript Frameworks that Support Edge Functions

Netlify Edge Functions also support a new generation of JavaScript frameworks that are either edge-first or have strong server-side rendering capabilities. Deploying Netlify Functions to a framework like Remix, Astro, 11ty, and Hydrogen allows you to run your entire app on the edge.

The Netlify team has been working with our friends across the JavaScript framework ecosystem to ensure that Edge Functions work great with them on day one.

Here are some resources to learn more or get started with Edge Functions on the framework of your choice:

Netlify Edge Functions as Middleware

Whereas serverless functions are expected to deliver a final response (because there’s nothing running downstream from them) edge functions run much earlier in the request chain.

This means that you can use edge functions with a middleware pattern. At runtime, an edge function can decide whether it wants to intercept the request or bypass itself completely.

Middleware is code (commonly used with Node.js) that executes before a request is processed. This means that you can use edge functions with a middleware pattern, where a function can decide, at runtime, whether it wants to intercept the request or bypass itself completely. The code within the edge function can be conditionally executed based on geolocation, allowing regional response based on user request location.

Learn more: How to use Next.js Middleware with Netlify Edge Functions →

import { Context } from "netlify:edge";

export default async (req: Request, { geo }: Context) => {
  // Bypassing if the request is not from Portugal.
  if (geo.country.code !== "PT") {
    return;
  }

  return new Response("Hello Portugal!");
};

Limitations of Netlify Edge Functions

With an execution limit of 50 milliseconds, Netlify Edge Functions are typically better suited for shorter, performance-critical operations running at the very beginning of the request chain, with the power to modify any aspect of the request before it’s processed further, or the response before it’s delivered to the client.

Netlify offers other types of functions for these requests. Netlify Functions, for example, can perform longer computations of up to 10 seconds (or even 15 minutes for Background Functions!), making them ideal to render entire applications or perform long-running asynchronous jobs.

Learn more about different kinds of functions on Netlify →

Getting started with Netlify Edge Functions

Writing your first edge function is as easy as adding a hello.js to netlify/edge-functions in your repository:

export default () => new Response("Hello world")

and registering it in your netlify.toml:

[[edge_functions]]
function = "hello"
path = "/test"

You can use the Netlify CLI to test edge functions locally before deploying them to Netlify, and then use continuous deployment or Netlify CLI manual deploys to deploy your edge functions.

Edge Functions Pricing and Limits

Netlify Edge Functions are available for free on all plans, including Starter, Pro, Business, and Enterprise. For more information on how usage is limited per plan, go to our pricing page.

Try out Edge Functions today

For more information on Edge Functions, check out the Netlify docs, or our edge functions example library, and get started with Edge Functions today! And please give us feedback and ask questions on the Netlify forums.

Edge Functions Resource Repo

To learn how to create your own edge functions, check out Netlify’s documentation:

Get started: A basic “hello world” example that covers testing, deploying, invoking, and monitoring an edge function.
Edge Functions API: An introduction to key concepts and a full endpoint reference.
Declarations: Understand configuration details and processing order.
Limits: Operation limits for the runtime environment and feature limitations during the experimental beta.