NextJS Rendering

[joselevelsup]

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.

[gregegan]

Experiencing the same issue

[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
});

[joselevelsup]

@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.

[gregegan]

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.

[joselevelsup]

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

[gregegan]

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

[joselevelsup]

Ah. So thats where I am stuck.

[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:

react-ab-test/examples/next/src/pages/index.js

Lines 31 to 43 in f48b4a5

	async ({ req }) => {
	abTestsEmitter.rewind();
	let userIdentifier = req.session.get('id');
	if (!userIdentifier) {
	userIdentifier = UUID();
	req.session.set('id', userIdentifier);
	await req.session.save();
	}
	return {
	props: {
	userIdentifier,
	},
	};

Let me know if that helps!