Optimizely + Vercel

Feature Flagging at the Edge

This demo shows how to use Optimizely's JavaScript SDK to run experiments on a Vercel-hosted Next.js app. This instance takes advantage of Vercel's Edge Network to run feature flagging at the edge.

Learn more about Vercel's edge config here.

In this example, decisioning is executed in middleware to re-write the value of the URL. Based on the decision, you'll see either a Bulbasaur, a Squirtle, or a Charmander below.

After an initial fetch for the project datafile from Optimizely's CDN, we store the datafile at the edge with Vercel's edge config. With the datafile stored at the edge, the datafile can be read in a matter of milliseconds (or less!) when instantiating Optimizely in the future. Below is a diagram of how this works.