How to use Edge Functions from Deno, Netlify and Vercel!

Get Started Quickly With Edge Functions On All The Best Providers!

Edge computing isn't new. However, in recent times, it has been made available to all developers using just a few lines of code.

The recent growth in edge function options that are offered via Edge-First JavaScript frameworks or CDNs, as well as web development platforms, put the potential of edge computing in the hands of developers. In this post, we will explore what edge functions are, their benefits, and how to use the major edge function providers.

What Are Edge Functions?

Edge Functions are a small unit of code, typically a single function(hence the name). They differ from Lambda functions in the sense that they are typically replicated all across an edge network and 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 website visitors around the globe

These networks will copy the code for your function all over the world. When a user submits a request, the network will ensure that the nearest server gets to execute your code.

The importance of the above is that it will enable developers to be able to localize content to display relevant advertisements, authenticate visitors, test content for A/B, amongst other things.

This all takes place in the edges - the global location that is closest to the user who is requesting it.

Edge functions also help reduce latency.

Benefits Of Edge Functions

Edge functions enable powerful new architectures and give the following advantages:

1. Reduction In Cold Start Loading Time

When a user requests a page, the server needs to load the code for the page. This is called a cold start. The longer the cold start, the longer it takes for the user to see the page. Edge functions reduce the cold start time by caching the code in the edge network. This means that the code is already loaded and ready to execute when the user requests it.

2. Personalized Content

The speed of edge functions and their close proximity to the user means that you can use edge functions to read cookies, headers, and other relevant information about the user. This allows you to serve personalized content to each user. This is a great way to increase engagement and conversion rates.

3. Reduced Delay

Running the logic closer to the user's location will not only decrease the volume of data, but also the distance the data has to travel. If a user sends an email from Arizona, the response time from a local server will be shorter than if same email was sent from London. Edge functions also makes provision for all kinds of functionality for websites and applications.

Edge Functions Providers

We'll explore the following providers:

Vercel
Netlify
Deno Deploy.

They all have different approaches to edge functions but are all really good options.

Vercel

Vercel Edge Functions are available for all frameworks, but the best and easiest way to use them is with Next.js. You will have to adapt your coding style to be a little bit leaner, and rely less on NPM packages as most packages using Node.js are not available on the edge.

The best approach to using Vercel Edge functions is to stick to standard Web APIs and avoid using Node.js packages that are not specifically designed for the edge.

How To Use Vercel Edge Functions

Start by creating a Next.js project and giving it a name. (in our case, next-edge)

yarn global add vercel
yarn create next-app --typescript

Navigate to your project and start the dev server

cd next-edge
yarn dev

Replace the pages/api/hello.ts file with the following code:

import type { NextRequest } from "next/server";

export default async function handler(req: NextRequest) {
  // Contrary to regular Next.js API routes, we use Standard Web APIs
  const { searchParams } = new URL(req.url);
  const name = searchParams.get("name");
  return new Response(`Hello ${name ?? "World"}!`);
}

// this will specify to the Vercel build system to deply to the edge network!
export const config = {
  runtime: "experimental-edge",
};

Next, navigating to http://localhost:3000/api/hello?name=Vercel will return Hello Vercel!
When you are ready to deploy your project, Run vercel and follow the instructions. You can also deploy your project to Vercel using the console.

See the full code on Github.

Netlify

Netlify Edge Functions have been around for a while now but are still in Beta. They work in a really similar way to Vercel, in the sense that they provide a smaller API surface than Node.js but with the ultimate goal of achieving more speed.

They provide a great example if you are already deploying to Netlify and want to add edge functions to your project. They provide a Context object that is specific to your Netlify project and can be used to set cookies and get geo information about users.

How To Use Netlify Edge Functions

Start by installing the Netlify CLI

yarn global add netlify-cli

Add edge functions to your Netlify project by creating a netlify.toml file in the root of the project. This file will contain the configuration for your Netlify project.
Add the code below to your netlify.toml file

[[edge_functions]]
# Path for the API route to be called
path = "/hello-world"
function = "hello"

Then, simply create a hello.js file at the root of your project with the following code:

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

You can now use the Netlify CLI to deploy your project to the edge network:

netlify deploy

You can also use the Netlify CLI to run your project locally:

netlify dev

Using Deno Deploy

Deno Deploy is a distributed system that runs JavaScript, TypeScript, and WebAssembly at the edge, worldwide. Deno allows you to deploy serverless functions to the edge network globally. It's a great option if you are already using Deno and want to deploy your functions to the edge network.

How to use Deno Deploy

Deno probably provides the fastest way to get started with edge functions if you are not tied yet to a specific framework.

First, we'll need to install the Deno Deploy CLI. (if you don't already have the Deno runtime installed, you can install it here)

deno install --allow-read --allow-write --allow-env --allow-net --allow-run --no-check -r -f https://deno.land/x/deploy/deployctl.ts

Proceed to grab a token from the Deno Deploy dashboard.

NB: Take note of this token as you will need it to deploy your functions.

Create a new empty project in the dashboard.

Take note of the project ID as you will need it to deploy your functions.

After this, we can create a new project with the command below

mkdir deno-edge
cd deno-edge
touch hello.ts

Next, add the following code to your hello.ts file:

import { serve } from "https://deno.land/std@0.155.0/http/server.ts";

serve((req: Request) => Response.json({ message: "Hello World" }));

You can then deploy your project to the edge network by running the following command:

deployctl deploy --project=s ./hello.ts --token

Voila! Navigate to the URL provided by the CLI to see your function running!

Conclusion

Edge functions are there and are ready to be used. They are a great way to improve the performance of your applications and websites.

If you are using Next.js Vercel is the best option for you. They also provide the best DX around Edge Functions.
If you are using Netlify, the offering is great and it is not worth switching to another provider just for Edge Functions.
Deno deploy is the best option if you are already using Deno and want to deploy your functions to the edge network. The CLI still needs some love but it's getting there!

Send any questions or comments at g.bibeaulaviolette@gmail.com!