There are two main methods for performing A/B tests for static pages in Next.js using Statsig.
The first method involves using getClientInitializeResponse
and storing the initializeValues
in a cookie. This approach is suitable if you want to avoid generating separate static pages for each variant. However, the cookie size is limited to 4KB, so this method might not be suitable if the initializeValues
are large.
The second method involves generating a separate static page for each experiment's variant. This approach is suitable if you have a small number of variants and want to avoid the cookie size limitation. However, this method might require more setup and maintenance if you have a large number of variants.
If you're unsure which method to use, you can start with the method that seems easier to implement and switch to the other method if you encounter issues.
If you're concerned about the size of initializeValues
, there are a couple of ways to bring down the response size. One way is to use target apps to limit the gates/experiments/etc included in the response. Another way is to add an option to getClientInitializeResponse
to specify which gates/experiments/etc to include in the response.
If you plan on stitching together multiple cookies, a simple string splice might be easier. An alternative that doesn't involve stitching together multiple initializeValues
is to use multiple client SDK instances. This wouldn't be supported in react, but using the js SDK, you could have multiple statsig
instances each with its own set of configs. You would have to keep track of which instance to use for which experiment but this may be a "cleaner" approach.
The JS SDK can be synchronously loaded using initializeValues
similarly to how the StatsigSynchronousProvider
works. So you should be able to just call statsig.initialize(..., {initializeValues})
without needing to worry about awaiting.
Finally, you can also use the local evaluation SDK to fetch the whole config before the page becomes interactive and then pass it to the synchronous SDK. This is a client SDK, but it solves the "flickering" issues because you don't need to wait for the experiment(s) data to be fetched on the fly.