Hi, everyone, this is Abhushan from <Alippo>, where I work as a Frontend Developer (working with Nex...
a

Abhushan Adhikari

about 3 years ago
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.