Optimizely and React server side rendering
I have a React app that is using server side rendering, and trying to implement AB testing with Optimizely.
Just using Optimizely out-of-the-box solution is a no bueno because when the snippet is changing the DOM after render the client side React app seens inconsistencies in the DOM what it rendered on the server side and it's not happy.
We use Redux & React to render the pages both on server & client side based on the data we have in the application store. That said if the store will have information about the different AB tests, the app can render the different variations easily.
The idea is that before pageload we get all the active experiments, and the decision of what variation to serve for the user from Optimizely, save it in the store, then log the clicks on the UI and push the results to Optimizely.
This way we could continue to use Optimizely for managing the variations, collecting and analyzing the results, even though it will require dev effort to put the variations in place beforehand running the experiments.
After all the variations are deployed on the server, the pageload consists of the following steps:
I. Before page load (Node.js)
1. Make an call to Optimizely REST API to get the active experiments, and the decision on the variation for the user (bucketing)
2. Update store with the experiment information
3. Render page on the server side from the store (which will be the variation per the experiment)
II. After page load (Browser)
1. React will be able to pick up the render where the server left it off because the DOM is consistent to the store information
- Is it possible to use the Optimizely REST API for this? Looking at docs I'm not sure.
- Does anyone have a better solution to keep the Redux React stack and use Optimizely for running AB tests?
- Read more about the solution here: https://medium.com/@korsosm/ab-testing-with-optimi
- Optimizely REST API http://developers.optimizely.com/rest/getting-star