https://www.growthbook.io/ logo
#ask-questions
Title
# ask-questions
m

most-finland-34024

08/26/2022, 12:12 PM
Hello. Quick question. I have just configured an A/B test against my next js webapp. Everything seems to be working great except that when I load the page I see the default value flash on the page and then it quickly gets replaced with one of the numbers from the A/B test. Has anyone else seen this before? Anything I can do to hide that default number?
f

future-teacher-7046

08/26/2022, 12:34 PM
If you are doing client side rendering, you can render a loading state by default until JavaScript runs and then swap in the correct component. The other option is to use middleware or server side rendering so the correct HTML gets sent to the user initially.
m

most-finland-34024

08/26/2022, 2:03 PM
thank you!
@future-teacher-7046 Thanks for the direction. I've mostly got this going. I'm trying to do an A/B test for my pricing page. I seem to have everything working and setup in my pages/_middleware.js. When I print out the pricing value for my new feature via console.log I'm successfully getting the value from Growthbook. So things are working yay. Unfortunately, it's not super clear to me how to pass this over to my
../pages/pricing.tsx
. I'm assuming I'd set the pricing value as a variable and use that variable in my
../pages/pricing.tsx
but I'm not connecting the dots. I understand this is out of scope and not related to Growthbook but I thought maybe you could nudge me in the right direction!
f

future-teacher-7046

08/30/2022, 3:07 PM
With Next.js middleware, there's no easy way to pass data into pages as props currently. So instead, you could basically create 2 pages -
pricing.tsx
and
pricing-new.tsx
and route traffic between them in the middleware.
m

most-finland-34024

08/30/2022, 5:51 PM
ah ok! that sounds doable and easy. thank you!
13 Views