search

marvelapp / react-ab-test

A/B testing React components and debug tools. Isomorphic with a simple, universal interface. Well documented and lightweight. Tested in popular browsers and Node.js. Includes helpers for Mixpanel and Segment.com.
MIT License
243 stars 46 forks source link

NextJS Rendering #22

Open joselevelsup opened 3 years ago

joselevelsup commented 3 years ago

Table of Contents

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

gregegan commented 3 years ago

Experiencing the same issue

gregegan commented 3 years ago

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 commented 3 years ago

@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 commented 3 years ago

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 commented 3 years ago

@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 commented 3 years ago

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

joselevelsup commented 3 years ago

Ah. So thats where I am stuck.

MauricioParadaG commented 3 years ago

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

moretti commented 3 years ago

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!