DEV Community

A/B Testing with the new Next.js 12 Middleware

Jeremy Dorn on October 26, 2021

Vercel recently released Next.js 12 which adds a number of exciting performance improvements as well as a new beta feature - Middleware. Middlewar...

Read full post

Amantel • Apr 14 '22 • Edited

Hi!
Great guide, thanks.

This line

  if (growthbook.feature("new-homepage").on) {

Probably is better written as

if (growthbook.feature("new-homepage").isOn) {

Original code work, but it's kinda confusing that sdk docs differ from the guide.

Jeremy Dorn • Jul 13 '22

isOn is just a helper method and is used like this to make the code a little shorter:

if (growthbook.isOn("new-homepage")) {

Afzal Hossain • Jul 8 '22

Worked on first try but with one issue. Can't maintain sticky session when using with netlify. visitor_id/id is not sent to growthbook and it's kept locally and when we have multiple instance if the middleware one isn't aware of the other and the A/B testing version initially served don't stick and randomly switch to different version for the same user (assuming when the middleware instance changes).
Thinking about workarounds (e.g separate cookie for each feature) but then I probably can't use most of the SDK features anymore :(
Anyone has a nice solution to this issue?

Collin Caram • Feb 24 '22

How can we keep the middleware fast and avoid making a call to the growthbook endpoint? Any way we can have that information cached locally?

Jeremy Dorn • Feb 24 '22

I don't believe Next.js provides any sort of persistent storage or cache for middleware yet. But, I do think you can do some in-memory caching. Basically, if you do the fetch outside of the exported middleware function and store the response in a variable, it should only run once at startup and be re-used across invocations. I haven't tested this with Vercel, but that's how Cloudflare workers and Lambda does it at least.

I can do some tests and update the article if works and ends up being better for performance.

Collin Caram • Feb 24 '22

Awesome, yeah the problems that would be nice if solved are:

how can we maintain optimal performance while doing a/b testing?
how can we update a/b testing config in growthbook, and have that be reflected in the application?

Jeremy Dorn • Feb 27 '22

@collinc777 I updated the example code in the article to use in-memory caching. So now, the first request will wait for the API response, but subsequent ones will return immediately. And it will refresh in the background after 5 seconds to keep the features up-to-date.

Still some improvements to make this truly production ready, like setting a time-out for the API fetch, but it's much closer now. Thanks for the idea!

Collin Caram • Feb 27 '22

Dang that was fast. Thanks @jdorn! I appreciate you being so responsive!

valentin mundrov • Aug 26 '22

I understand the Next 12.2.0 middleware runs on edge-runtime and won't let us fetch data without proxy (Prisma). Edge-runtime requires req to be passed in <1.5sec. or it times out. So, is fetching in middleware actually possible? Appreciate your effort!

Prajjwal • Oct 26 '21

Cool! and so quick post!!

Ludal 🚀 • Oct 26 '21 • Edited

Wow, I didn't even know this could be possible with Next.js! I'm so impressed by their updates. Thanks for sharing. 🤝

david ornelas • Feb 7 '22

Do you have a repo somewhere? I cant seem to get growthbook to work

Jeremy Dorn • Feb 8 '22

Hi David. What problems are you having?

I just found and fixed a couple typos in the middleware code in the article. It was using /homepage_new instead of /new_homepage and I forgot an async in the function signature. It's possible those were causing issues for you.

david ornelas • Feb 8 '22 • Edited

I have a cloud account on growthbook.io and it cant seem to connect to it to check whether to roll out a feature. Everything just says "unknownsource" on it