Rich-text Reply

Optimizely and React server side rendering

milankorsos 07-13-16

Optimizely and React server side rendering

[ Edited ]

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.


Possible solution


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
   2. We track different events (experiment goal) on the UI and push them to Optimizely via the JavaScript API




  • 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?





robertchan 08-01-16

Re: Optimizely and React server side rendering

While I've not used Optimizely's REST API, I can say that the way we went about working with a React application has been setting an event fired on page load so that Optimizely can detect page changes, and then added classes/IDs within React so that elements could be manipulated via Optimizely.
Robert Chan

Experimentation Hero