Vercel edge functions released in beta alongside Next.js 12. I’ve been asked before: What can you do with these new edge functions? Let’s dive into giving a quick overview of what edge functions are. Then I’ll give you some practical examples where you can use edge functions to enhance your web apps, hopefully inspire some ideas of your own along the way.
I would also like to mention how edge functions are synonymous with middleware. I’ll cover that more later but it’s worth noting for this post edge function and middleware mean the same thing.
What are Edge Functions?
An edge function is a small piece of logic you push to the edge that executes when any request comes in view a page on your web app. (The edge is the marketing term for a CDN or globally distributed network of servers.) The logic can check geolocation data, cookie info, even fetch 3rd party data.
But the power comes from the fact that, based on the request that comes in, you can change the response that is sent back. Edge functions give you the power to redirect or rewrite URL’s to new content based on response data. This happens at the edge, close to your site visitors, so it is fast!
This unlocks a lot of potential because in traditional Jamstack you generate your pages during the build step, way before you even know who your visitor is. Now you see who is making the request and decide based on that information.
Check out the Edge Function feature page to learn more or my video on Getting Started with Edge Functions.
Edge Function Use Cases
Now that you know about edge functions, let’s look at some use cases to help solidify what they really are capable of.
Something I’d like to mention first is that Vercel Edge Functions are not limited to the Next.js framework. You can use Edge Functions with any application hosted on Vercel. (That’s the only requirement hosted on Vercel). So your React, Angular, Nuxt, Vue app can all benefit from pushing logic across the CDN layer and take advantage of these use cases.
Let’s jump into some cool ways you can use Edge Functions.
Static Site Personalization
Because Edge Functions now let you rewrite or redirect the URL for any request, you can send visitors to personalized content.
A simple case would be to have a personalized static page for every country. Now when a request comes in, look at the geo location data and redirect visitors to the personalized country page. Or maybe you have an events section on your page. Send people to a personalized page with events near them.
To gain even more info about your visitor, you can fetch data from a 3rd party service. Send up cookie info to your Customer Data Platform (CDP), and there you may have even more visitor related information.
To keep your site as fast as possible, you can pre-generate this personalized content. This way, your visitors experience little to no difference in site performance.
Maybe pre-generating content for every audience isn’t possible. This is where Incremental Static Regeneration (ISR) comes in. With ISR, you can generate personalized content for a specific audience on the fly. The first visitor to fit into a specific audience, ISR will generate your page and now all subsequent visitors will get the fast pre-generated content.
Verifying a User is Authorized to View Content
An issue I have seen brought up around Jamstack sites has been how do you ensure a visitor is authorized to view a page before you deliver that page to the user? Maybe you want content behind a paywall, a common use case for this could be a learning management system (LMS).
Prior to edge functions, you would need client side logic to determine if a visitor should see your content. But at this point, it’s too late. Maybe you can block the UI but the content technically has already reached the visitor.
Now with edge functions you can, on the CDN (essentially server-side), verify if your visitor is authorized. The content is not sent to the visitor until they are verified. Here is an example of using basic authentication and another with JWT authentication.
Edge functions also make it simple to region block. Do a quick check in the middleware of the requesting geolocation and if it’s from a region you do not want to support easily return a 403 or similar to block access from that region.
Logging
The final use case I want to cover is logging. With edge functions, you can offload the work of logging to the CDN layer.
Maybe you are using a CDP and want to track certain page views or events. You can do that with an edge function. You could be using an observability service like DataDog or LogRocket and want to publish data to those services. Use an edge function!
Edge functions even have a cool feature that you can return the response to the user, but using the waitUntil() method prolong the execution of the function. So once you have the data you need, send your response to your visitor but keep your long running asynchronous calls going. No need to keep your visitors waiting for a logging function.
Summary
Vercel’s release of edge functions unleashes a lot of possibilities for Jamstack and static sites. Before we could not easily and quickly access user geo-location, cookie information, or IP address. We now have more information than ever and at the super performant CDN layer.
The examples above of static site personalization, verifying users are authorized, and logging only scratch the surface of what is possible. I am looking forward to seeing the cool things that people do with edge functions.
For more information on edge functions and even more example use cases check out the edge function feature page or my video on Getting Started with Edge Functions.
Top comments (0)