Hi, everyone, this is Abhushan from Alippo, where I work as a Frontend Developer (working with Next.js) and have been using Growthbook for the last 2-3 weeks. I needed some help/ideas regarding a scenario that we are planning to test for a new feature for our audience using either a simple A/B experiment or a gradual percentage rollout, where I need to conditionally hide or show the feature, Let's say I need to A/B test section C (hide/show) on my page which has the following structure: Section A Section B Section C ----> needs to show/hide this section for certain users Section D Section E I had two approaches to solve this but was wondering if I am heading in the right direction here: 1. Since the section sits in between, conditionally rendering this on the client would be a bad idea as it will cause a significant Cumulative Layout Shift (CLS), and the only way to avoid it would be to restructure the page such that I move the section C to the bottom of the page : Section A Section B Section D Section E Section C -----> conditionally rendering this will cause zero CLS? 2. Find out whether or not to show the section on the server-side (Next.js Data Fetching hook getServerSideProps) and then pass the boolean flag as props and conditionally render Section C (since the page will be server side rendered), which should again not cause any CLS....? Also in general wanted to ask how you plan A/B on client-side (maybe based on a certain user attribute that is only available on the client ) without causing any CLS on the page.( I usually play with opacity 0 and 1 if has a small layout, hiding or showing banners on top of page ) which does not affect CLS, but this does not seem scalable for bigger section since it will leds to empty spaces on the page. Thanks! Loking forward to your suggestions.

Hi Abhushan, yeah CLS is an issue any time you're rendering user-specific content during React hydration. Both of your approaches would work. One additional approach would be using Next.js 12's middleware. You would make two versions of the page and then route traffic between them in a middleware using the GrowthBook SDK. It does require you to have the user ids and targeting attributes available server-side though, so that might not be possible for you.

Thanks @future-teacher-7046 for the quick response! The solution for serving a loading state with half the height also makes sense for clinet aide specific attribute definitely sounds a promising solution. I will definitely try that out and see the results! 😁

delivery hero