<Experiment name="An Experiment" userIdentifier={this.props.sessionId}> - sessionId comes from express-session
  <Variant name="Variation A">
    <div>
     {children} - children here represent actual elements not like a parent Component
    </div>
  </Variant>
  <Variant name="Variation B">
    <div>
     {children} - children here represent actual elements not like a parent Component
    </div>
  </Variant>
</Experiment>

Current Behavior

The Experiment does render a variation but it does not render the proper elements and its children.

Outcome:

{/* Rendered Properly */}
<div className="class">
 <p className="class-p">
  Hello P
</p>
 <p className="class-pd">
  Hello PD
</p>
</div>

{/* Current Results */}
<div className="class">
 <p className="class-p">
  Hello PD
</p>
 <p className="class-pd">
  Hello P
</p>
</div>

Possible Solution

Steps to Reproduce (for bugs)

Start a new nextjs project
Make a new Experiment in a page
Add the sessionId from express-session to the Experiment userIdentifier prop
See the results

Context

I can not show different variants properly if the rendering keeps breaking.

Your Environment

Version used: 2.3.0
Browser Name and version: Chrome 86.0.4240.75 or Firefox 81
Operating System and version (desktop or mobile): Manjaro
Link to your project: Can not provide.

Oct 12 '20 19:10 joselevelsup

Experiencing the same issue

Nov 10 '20 22:11 gregegan

FYI - I started dynamically importing the module and it looks to be rendering properly now.

https://nextjs.org/docs/advanced-features/dynamic-import

const DiscoveryFeed = dynamic(() => import('../DiscoveryFeed'), {
  ssr: true
});

Nov 10 '20 23:11 gregegan

@gregegan is it still working for you? Cause after a couple of refreshes (without dynamic imports), the problem I described would still occur. So I just want to make sure that with dynamic imports it works.

Nov 11 '20 19:11 joselevelsup

I got it working properly with dynamic imports, yes.....

The serverside render definitely renders different markup then the clientside... so just dynamically importing it forces it to only clientside render.

Nov 11 '20 19:11 gregegan

@gregegan one last thing. Have you had it working without dynamic imports? Like just have the Variants render regular components. e.g.

<Variant name="A">
  <div>
//Other elements in here
  </div>
</Variant>
<Variant name="B">
  <div>
//Other elements in here
  </div>
</Variant>

Nov 23 '20 17:11 joselevelsup

I never got it working properly without dynamic imports, I was experiencing the same issue as you.

Nov 23 '20 17:11 gregegan

Ah. So thats where I am stuck.

Nov 23 '20 17:11 joselevelsup

Solve it the same way. Thank you @gregegan it was the solution to use dynamic import

Feb 19 '21 19:02 MauricioParadaG

I created an example here: https://github.com/marvelapp/react-ab-test/tree/master/examples/next with server side rendering in NextJS. The user identifier is just a UUID stored in the current session: https://github.com/marvelapp/react-ab-test/blob/f48b4a50daf32e9facb5ae6d2588a8288d384eea/examples/next/src/pages/index.js#L31-L43 Let me know if that helps!

May 29 '21 17:05 moretti

NextJS Rendering

Table of Contents

Expected Behavior

Current Behavior

Possible Solution

Steps to Reproduce (for bugs)

Context

Your Environment