How to build zero-CLS A/B tests with Next.js and Vercel Edge Config

Note: This post is historical and describes Edge Functions as they existed at the time. For new projects, use Vercel Functions with the Node.js runtime and Fluid compute.

Link to headingGreat experiments matter

Experiments are a way to test how distinct versions of your application perform with your users. With one deployment, you can present different experiences for different users.

While experiments can be incredibly insightful, it's historically been difficult to run great tests on the Web:

• Client-side rendering (CSR) your experiments will evaluate which version of your app a user will see after the page has loaded. This results in poor UX since your users will have to wait for loaders while the experiment is evaluated and eventually rendered, creating layout shift.

• Server-side rendering (SSR) can slow page response times as experiments are evaluated on demand. Users have to wait for the experiments along a similar timeline as CSR—but stare at a blank page until all of the work is done to build and serve the page.

These strategies end up with a poor user experience and give you bad data about your experiments. Because you’re making your load times worse, you are negatively impacting what should have been your control group.

Milliseconds make millions, so using the right rendering strategies makes a big difference. Slow load times give you inaccurate results and false impressions about your experiments.

Link to headingDefining the experiment engine

For our engineers who aren’t working with experimentation every day, we wanted a simple, standardized path to effective, high-performance experiments. Our requirements were:

• Zero impact on end-users

• Automatically keep users in their "experiment bucket" using our feature flag vendor

• Send events to our data warehouse when users have given consent

• Excellent "out-of-the-box" developer experience

Using the right tools, we knew we could improve both our internal developer experience and end-user experience.

Link to headingLeveraging Edge Config for read speed

Vercel Edge Config is a JSON data store that allows you to read dynamic data as geographically close to your users as possible. Edge Config reads complete within 15ms at P99 or as low as 0ms in some scenarios.

1
import { NextResponse, NextRequest } from 'next/server'
2
import { get } from '@vercel/edge-config'
3

4
export async function middleware(request: NextRequest) {
5
  if (await get("showNewDashboard")) {
6
    return NextResponse.rewrite(new URL("/new-dashboard", request.url))
7
  }
8
}

We're leveraging Statsig's Edge Config Integration to automatically populate the Edge Config connected to our project with the experiment’s evaluation rules. We can then fetch our experiments in our code easily.

1
import { createClient } from '@vercel/edge-config'
2
import { EdgeConfigDataAdapter } from 'statsig-node-vercel'
3
import Statsig from 'statsig-node'
4

5
async function initializeStatsig() {
6
  const edgeConfigClient = createClient(process.env.EDGE_CONFIG)
7
  const dataAdapter = new EdgeConfigDataAdapter({
8
    edgeConfigClient: edgeConfigClient,
9
    edgeConfigItemKey: process.env.STATSIG_EDGE_CONFIG_ITEM_KEY,
10
  })
11

12
  await Statsig.initialize(process.env.STATSIG_SERVER_KEY, { dataAdapter })
13
}
14

15
async function getExperiment(userId, experimentName) {
16
  await initializeStatsig()
17
  return Statsig.getExperiment({ userId }, experimentName)
18
}

Link to headingUsing Next.js for high-performance, flexible experiences

As a high-level overview, we are going to:

• Create type safety for our code

• Pre-render our experiments on the server

• Serve the correct page variations to our users using their cookies

• Automatically capture events with a React Context

Link to headingCreating experiments in code

To create the most predictable developer experience for ourselves and our teammates, we created a typesafe, single source of truth for our monorepo. Each experiment defines possible values for each parameter along with the paths where the experiment is active. The first value in each array is the default value for a parameter.

1
export const EXPERIMENTS = {
2
  pricing_redesign: {
3
    params: {
4
      enabled: [false, true],
5
      bgGradientFactor: [1, 42]
6
    },
7
    paths: ['/pricing']
8
  },
9
  skip_button: {
10
    params: {
11
      skip: [false, true]
12
    },
13
    // A client-side experiment won't need path values
14
    paths: []
15
  }
16
} as const

Link to headingPre-rendering experiment variations

Dynamic routes allow Next.js users to create page templates that change what they render using parameters in the route. For our purposes, we encode the experiment variations into the page's pathname. We’ll supply that data through Next.js’ powerful data fetching APIs: getStaticProps and getStaticPaths.

The engine we built offers a wrapped version of getStaticPaths which builds the paths for all of the variations of the page. Each path is an encoded version of the hash of the experiment values for that particular path, meaning we store experiment values in the URL itself.

Each experiment parameter has multiple options because a page can have many experiments. All possible combinations of experiment values for each path could create long build times if a page has many experiments with many variations. To solve this, we calculate the first n combinations with a generator function and only pre-render those variations, defaulting to 100 page variations per path.

Paths not generated at build time fall back to Next.js' Incremental Static Generation or Incremental Static Regeneration patterns depending on if you've supplied a revalidation interval. Deciding how many pages you want to pre-render is a tradeoff between build time and impact of the delayed initial render for the first visitor to an incrementally static rendered page.

The engine also has a wrapper for getStaticProps where we decode the parameter from the URL to get the experiment values to use in our pages. We also made sure to give our wrapper the same type as getStaticProps so our teammates could use a familiar API.

Because these are statically generated pages, the values are available at build time. Putting together our engine's getStaticPaths and getStaticProps wrappers, our code comes out to look something like:

1
// Your encoding implementation
2
import { encodeVariations, decodeVariations } from './encoders'
3

4
export function experimentGetStaticPaths(
5
  path,
6
  maxGeneratedPaths = 100
7
) {
8
  return (context) => {
9
    const paths = encodeVariations(path, maxGeneratedPaths)
10

11
    return {
12
      paths,
13
      fallback: 'blocking',
14
    }
15
  }
16
}
17

18

19
export function experimentGetStaticProps(pageGetStaticProps) {
20
  return async (context) => {
21
    const { props: pageProps, revalidate } = await pageGetStaticProps(context)
22
	  const encodedRoute = context.params?.experiments
23

24
    // Read from URL or use default values
25
    const experiments = decodeVariations(encodedRoute) ?? EXPERIMENT_DEFAULTS
26

27
    return {
28
      props: {
29
        ...pageProps,
30
        experiments
31
      },
32
      revalidate
33
    }
34
}

Now, when we go to implement an experiment, we can write:

1
export const getStaticPaths = experimentGetStaticPaths("/pricing")
2

3
export const getStaticProps = experimentGetStaticProps(async () => {
4
  const { prices } = await fetchPricingMetadata()
5

6
  return {
7
    props: {
8
      prices
9
    }
10
  }
11
})

Link to headingServing experiments to users

To ensure that our users end up on the correct page variations, we leverage rewrites in Next.js Middleware.

• If a user has visited vercel.com before, the rewrite is powered by the user's existing cookie.

• If a user doesn't have a cookie, the Middleware reads from Edge Config and encodes the values, determining the route for the variation. Thanks to the speed of Edge Config, we know our user won’t have a delayed page load.

When you use a rewrite in Middleware, your user still sees /pricing in their browser bar even though you served /pricing/0p0v0, the statically pre-rendered version of the page with their experiment values.

1
import { NextResponse } from 'next/server'
2

3
async function getExperimentsForRequest(req) {
4
  const cookie = getExperimentsCookie(req)
5
  const experiments = cookie 
6
    ? parseExperiments(cookie)
7
    : readExperimentsFromEdgeConfigAndUpdateCookie(req)
8

9
  return experiments
10
}
11

12
export async function middleware(req) {
13
  const experiments = await getExperimentsForRequest(req)
14
  const path = getPathForExperiment(experiments, req)
15

16
  return NextResponse.rewrite(new URL(path, req.url))
17
}
18

19
export const config = {
20
  matcher: '/pricing'
21
}

The cookie's value is the experiment parameters assigned through the Statsig Edge Config integration that we set up earlier. Our users will end up in "buckets" based on the values that our Statsig integration assigns them, intelligently handling which users receive which experiments.

A user receives a page that was rendered on the server so our React components that use our engine's useExperiment hook will already know their values, resulting in no layout shift.

1
function Pricing({ prices }) {
2
  const { enabled, bgGradientFactor } = useExperiment("pricing_redesign")
3

4
  return (
5
    <div>
6
      <h1>Pricing</h1>
7
      {
8
        enabled ? 
9
          <GradientPricingTable factor={bgGradientFactor} prices={prices} /> 
10
          : <PricingTable prices={prices} />
11
      }
12
      </div>
13
    )
14
}

Now that we have the right UX, we need to collect, explore, and analyze data about our experiments to how they are performing.

Link to headingMeasuring success

Using our typesafe helpers from before, we built a React context that holds the experiment values for the current page, automatically reporting an EXPERIMENT_VIEWED event to our data warehouse.

1
export function trackExperiment(experimentName) {
2
  analytics(EXPERIMENT_VIEWED, getTrackingMetadataForExperiment(experimentName))
3
}
4

5
const Context = createContext()
6

7
export function ExperimentContext({
8
  experiments,
9
  path,	
10
  children
11
}) {
12
  useEffect(() => {
13
    for (const experimentName of getExperimentsForPath(path)) {
14
      trackExperiment(experimentName);
15
    }
16
  }, [])
17

18
  return (
19
    <Context.Provider experiments={experiments}>
20
      {children}
21
    </Context.Provider>
22
  )
23
}

After we’ve collected enough data, we can visit our internal data visualization tools to evaluate the performance of our experiments and confidently decide what to ship next.

Link to headingHandling client-side experiments

Not every experiment will happen on the first page load so we still need to be able to handle client side experiments. For example, an experiment can be rendered in a modal or pop-in prompt.

In these cases, we use our client-side React hook since we don't have to worry about the initial loading experience.

1
function PricingModal() {
2
  // Fully-typed `skip` from EXPERIMENTS constant under the hood 
3
  const { skip } = useClientSideExperiment("skip_button")
4

5
  return (
6
    <Modal>
7
      <Modal.Title>Invite Teammates</Modal.Title>
8
      <Modal.Description>Add members to your team.</Modal.Description>
9
      <Modal.Button>Ok</Modal.Button>
10
      {skip ? <Modal.Button>Skip</Modal.Button> : null}
11
    </Modal>
12
  )
13
}

With this hook, we read directly from the cookie to find out what experimentation bucket our user belongs to and render the desired UI for that experiment. We won’t need server-side rendering, static generation, or routing for these experiments since the user is already interacting with our UI.

Link to headingEnsuring experiments stay fresh

It’s possible for a user to end up with a stale or outdated cookie in their browser while experiments update behind the scenes. For current Vercel projects, use Routing Middleware for request-time bucketing and Vercel Functions with Fluid compute for background refresh work. Edge Config still provides fast reads for experiment configuration.

Link to headingEffective experiments, every time

With Next.js and Edge Config, we've built an experimentation engine where:

• Our users won’t experience Cumulate Layout Shift as a result of an experiment.

• We can run multiple page and component-level experiments per page and across pages.

• We can ship and iterate on experiments at Vercel more quickly and safely.

• We can collect high-value knowledge on what works best for our users without sacrificing page performance.

For the past few months, we’ve shipped many different zero-CLS experiments on vercel.com and we’re excited to continue improving your experience with new insights.

¹ "Milliseconds Make Millions" report, Deloitte Digital