How to drive experiments and personalization without impacting performance
You can deliver custom UX without sacrificing site performance. Learn how to balance speed and personalization with Vercel Edge Middleware.
Personalization vs. speed: every millisecond matters
As online businesses know, a delay in page load between adding to cart and clicking “check out” can equal thousands in lost revenue. However, personalization matters too—if not more—in today’s global market.
This is one of the key challenges facing developers today: What’s the best way to render a page, when you’re juggling the tradeoff between speed and personalization?
Developers, and your business, shouldn’t have to choose. With flexible frameworks like Next.js and solutions like Vercel Edge Middleware, you can reduce those trade-offs and get the freedom to choose the method that works best for you and your users.
In this brief, we’re going to explain how Edge Middleware works, and have a look at ways that it can help teams deliver fast and dynamic experiences—all while maintaining an exceptional developer experience.
How does middleware work?
Middleware is another part of your application—it’s code that executes before a request is processed on a site. That code will typically process or modify the response by rewriting and redirecting.
As the request is made to the server, middleware will intercept, and send back the correct page elements (for example: where someone is located or whether they're logged in).
With middleware, decisions get made on the server side, not in the browser.
In short, middleware:
Tells the server which page to return, based on the user requesting it
Runs before the page is loaded, and returns page based on the answer
Lives between the code and the data center
Seamless configuration with your application
From automatic configuration to personalization, Edge Middleware on Vercel creates a top experience for devs and users alike. Here are some of the features:
Vercel automatically configures Edge Middleware
Next.js gives developers the ability to implement middleware in their applications. On Vercel, middleware gets automatically configured on our global Edge Network, ensuring global performance out of the box, and working in perfect harmony with the static or traditional serverless pieces of your application.
Zero configuration on any framework
Using Edge Middleware on Vercel allows developers to avoid lengthy configuration files. Instead, you can define routing rules (like rewrites, redirects, and headers) with code. In fact, you can define the entire global infrastructure of your application from code, no matter what framework you choose to build with.
Personalized cached content
Middleware on Vercel runs before the cache, giving it the ability to quickly route and rewrite requests to return pre-rendered pages. Developers can ship multiple versions of the same pre-built static site, and fetch the correct version—configured entirely by your custom code.
Instant code execution
Edge Middleware has no cold boots and 100x faster startups than Node.js on containers or virtual machines. It can check for and serve the right page instantly. This is why we say "dynamic at the speed of static.”
Use cases
Your users expect a fast, personalized, and secure experience. Let’s dive into some of the ways you can make this happen with Edge Middleware on Vercel.
A/B testing and feature flags
Teams are constantly looking to glean insights about their users. Vercel Edge Middleware creates a highly personalized test without disrupting users’ experience on your site. Additionally, it can help with feature flags, giving you the ability to deploy instantly when you build a site behind one.
Without Edge Middleware
With Edge Middleware
Flash incorrect versions of the page to the user, before going to the correct variation—known as the “flicker effect.”
Make decisions on the server-side instead of the browser, so the control version never shows.
Build features from behind feature flags, resulting in deployment delays. Different versions of sites run in the background, creating latency.
Deploy instantly when building behind a feature flag. New features load correctly even with a different version running in the background.
Execute code on the client side through third-party scripts, adding bloat and often impacting performance.
Eliminate need for third-party scripts, reducing the amount of code sent to the client, and leveling up site performance.
SumUp ships personalized A/B tests at the edge
SumUp is a UK-based fintech company that makes card readers and processes payments for over 3.5 million merchants and small businesses worldwide.
They use Vercel Edge Middleware to personalize content at the edge, for custom experimentation, and A/B testing.
Here’s how it works: if SumUp’s site visitor is part of the split test, they’ll be routed from the edge server to one of the possible variants. The URL is rewritten accordingly to show the appropriate page to each user—and this all happens instantaneously, on the server-side. They don’t need to load heavy client-side libraries for personalization or deal with layout shift from validating whether the visitor was part of the current experiment or not. The user sees only what they are meant to see, instantly.
Security
Bots. Authentication. Secure sign-in and passwords. The list of security considerations can seem endless, and teams are faced with more requirements and resources than ever before. To top it off, security provisions are intrinsically high stakes. Vercel Edge Middleware can ease this burden, giving your users an experience that is both secure and fast.
Without Edge Middleware
With Edge Middleware
Unauthorized content flickers, because authentication is not immediately prompted.
Show paywall or authorized page versions instantly, with no delay or glimpse of unauthorized content.
Bots flood websites during big drops and purchase products before real users get the chance.
Intercept requests with bot protection middleware, to determine whether it came from a bot. If determined to be malicious, the request is refused.
Secure sign-on is cumbersome and creates delays for the user.
Sign-ons are quick, secure, and handled by Edge Middleware.
Clerk authenticates in under one millisecond using Edge Middleware
Clerk is an authentication plugin that runs on Edge Middleware. They use a hybrid JWT approach (JSON web token), which allows them to authenticate requests in under one millisecond, but still revoke sessions in under one minute during security emergencies. Their security-conscious customers also enjoy speed benefits of the edge. With Clerk on Edge Middleware, users can safely authenticate requests without contacting an origin server, so authentication has no practical impact on their time-to-first-byte.
“Edge Middleware is key for our platform. In fact, customers have already been asking us to add authorization-related claims to our JWTs, so that both authentication and authorization can be completed in under one millisecond. We're excited to enable this extra layer of decisioning soon, and we are already so pleased with Edge Middleware and its seamlessness and flexibility.”
Colin Sidoti,Co-Founder and CEO of Clerk
Geolocation
Organizations use geolocation for a variety of reasons, from tagging images on social media to discerning location for content localization, including language, currency unit, and cultural context. When you geolocate and localize on the edge, you enjoy less client-side code, reduced flicker, and it’s easier to manage different versions of your site.
Without Edge Middleware
With Edge Middleware
Display incorrect currencies, languages, and more–all with long page load times.
Localize experiences seamlessly, so users around the world can experience content most relevant to them.
Run content through a geolocation service to ensure proper localization, putting a financial and workload burden on developers.
Geolocate requests automatically, so developers don’t need to manage or pay for a geolocation service.
Sell services locally, but experience difficulty competing in international markets.
Serve local content accurately and instantly, which allows companies anywhere, of any size to be global.
HashiCorp localizes with Vercel Edge Middleware geolocation feature
Vercel Edge Middleware will be the key to content localization for HashiCorp, a San Francisco-based cloud infrastructure company.
Like many enterprise customers, HashiCorp’s customer base is globally distributed, and requires localized content instantly. This led them to the edge—and to using Vercel Edge Middleware. Edge Middleware’s API contains a geolocation object, pre-populated with the visitor's country, region, and city based on their IP address.
This data is then used to conditionally show or restrict content.
When using Vercel Edge Middleware, users’ requests are automatically geolocated, eliminating the need (and cost) of an additional geolocation service. This will be an efficient and cost-effective way for HashiCorp to serve their users a bespoke experience.
“As a company with a globally distributed customer base, we’re excited to leverage Vercel platform features like Edge Middleware that will allow us to continue delivering delightful experiences on the Web with the same level of performance that our customers have come to expect of our products…We’ve had great results with our internal testing of the feature and are confident it will be a critical component of our internationalization efforts.”
Dylan Staley,Software Engineer at HashiCorp
Path handling
Developers are tasked with redirecting, rewriting, and building SEO-friendly content—all while managing multitenant applications with multiple custom domains. Using Vercel Edge Middleware for path handling benefits users, content creators, and developers alike.
Without Edge Middleware
With Edge Middleware
Engage in labor-intensive manual SEO practices. SEO is the top priority for content creators, but most platforms are not optimized for SEO.
Generate content on the server side so it is more easily indexed. Content is served to search engines statically, with no client-side JavaScript routing.
Juggle numerous considerations when implementing rewrites, and manage multiple sites and custom domains under the same application.
Implement rewrites, without worrying about SSL certificate generation, Nginx proxy, and more. Additionally, all sites fall under one application, removing the need to manage each site separately.
Experience slow page loads, long TTFB, and low RES scores.
Dynamically redirect pages at the edge, resulting in faster page loads than your competition.
Super at the edge for path handling
Super is the top Notion-to-website generator in the market today. A longtime Vercel enthusiast, Super was one of the first customers to adopt Vercel Edge Middleware.
Their primary middleware use is rewriting on the edge for their multi-tenant application. They now enjoy top Lighthouse scores, highly performant pages, and have seen a steady increase in page views.
“Initially Super used incremental static regeneration (ISR) to serve pages instantly using a Vercel project for each site. As we scaled this became increasingly less manageable and forced us to compromise on speed with server-side rendering (SSR) in order to keep all sites under a single project. Middleware and its powerful path handling has allowed us to move back to ISR while still keeping all sites under a single project. This gives Super the best of both speed and scalability of the overall platform.”
Jason Werner, Founder of Super
The future of frontend
We believe that the future of frontend lives at the edge.
Edge Middleware brings leading technology directly into your workflow. You can configure complex global infrastructure and routing without leaving your application. It's smaller (less application bloat), faster (starts up and returns quickly), and performs better (more easily indexed for better SEO).
Subsequently, you’re empowered to build sites that achieve a better user and developer experience, giving you the ultimate competitive advantage.
Create personalized content at the speed of static sites.
