# A/B Testing on Vercel

**Author:** Rich Haines

---

A/B testing allows you to serve different versions of your site to different groups of visitors. This could be two versions, split at 50% of your traffic, or as complex as thousands of small experiments to optimize the content shown on screen.

One example application of A/B testing is news sites. When you land on a news article, the headline has been carefully selected for you. For example, the experiment might start out as a split test between two headlines:

1. ”How Next.js is bringing dynamic at the speed of static”
   
2. ”A/B testing and high-performance personalization with Next.js”
   

After monitoring the experiment, metrics show option two has higher click-through rates. The headline is then updated to use the higher performing variation. Other metrics besides click-through rates could be used, including:

- User conversion
  
- User engagement
  
- Sessions
  
- Bounce rate
  

## Edge Middleware

[Middleware](https://vercel.com/docs/concepts/functions/edge-middleware) allows you to run code before a request is completed. This gives you full flexibility to add A/B testing and personalization to any part of your application, all defined as code instead of configuration.

A/B testing on the server-side with [Edge Middleware](https://vercel.com/resources/edge-middleware-experiments-personalization-performance) reduces layout shift by preventing client-loaded experiments and improves your site's performance by serving smaller JavaScript bundles.

Because you have access to the incoming request and `User-Agent`, you can also prevent bots or search crawlers from hitting experiments.

## Providers

Edge Middleware can be used with any third-party library or service to run experiments and A/B testing, including:

- [A/B Testing with Cookies](https://vercel.com/templates/next.js/cookies)
  
- [Configcat](https://vercel.com/templates/next.js/ab-testing-configcat)
  
- [Split](https://vercel.com/templates/next.js/ab-testing-split)
  
- [Builder.io](https://vercel.com/templates/next.js/personalization-builder-io)
  
- [Google Optimize](https://vercel.com/templates/next.js/ab-testing-google-optimize)
  
- [Statsig](https://vercel.com/templates/next.js/ab-testing-statsig)
  

View more [templates](https://vercel.com/templates?type=edge-functions).

---

[View full KB sitemap](/kb/sitemap.md)