NextJS Rendering

Table of Contents

• Expected Behavior
• Current Behavior
• Possible Solution
• Steps to Reproduce (for bugs)
• Context
• Your Environment

Expected Behavior

The Experiment should render one variation and it should be displayed properly

Setup:

<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)

1. Start a new nextjs project
2. Make a new Experiment in a page
3. Add the sessionId from express-session to the Experiment userIdentifier prop
4. 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.

[MauricioParadaG]

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

[moretti]

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!