Open source feature flagging and experimentation platform for stress free deployments, measured impact, and smarter decisions.

GrowthBook Users

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.

If you need client-side attributes in order to know what version to show, there's no perfect solution.  You could start with a loading state that is roughly half the height of the section.  Then when it loads, all users will get a smaller CLS as opposed to half of users getting no CLS and the other half getting a big one.

Thanks <@U01TCPDB58C> 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! :grin: