Issues with SSR since @optimizely/react-sdk@^2.0.0

[oMatej]

I am trying to integrate @optimizely/react-sdk with a project that uses the next.js framework. Everything was working fine, but since the release of @optimizely/react-sdk@^2.0.0 there is a problem with the initialization of optimizely instance on the client-side.

Even though I am providing the datafile that is fetched during server-side rendering, optimizely.isReady() initially returns false.

So my experiments that are defined like below:

<p>Experiments:</p>
<OptimizelyExperiment experiment="DEV_experiment">
  {variation => <p>got variation {variation}</p>}
</OptimizelyExperiment>
<hr/>
<OptimizelyExperiment experiment="DEV_experiment">
  <OptimizelyVariation variation="variation_1">
    variation_1
  </OptimizelyVariation>
  <OptimizelyVariation variation="variation_2">
    variation_2
  </OptimizelyVariation>
  <OptimizelyVariation default>
    default
  </OptimizelyVariation>
</OptimizelyExperiment>

During the server-side render the content for variation_2.

<p>Experiments:</p><p>got variation <!-- -->variation_2</p><hr/>variation_2</div>

But in the browser, it cannot retrieve it for some reason.

<p>Experiments:</p><p>got variation </p><hr>default</div>

Instead, I can see logs in the console that Client became ready (https://github.com/optimizely/react-sdk/blob/master/src/hooks.ts#L132). However, since I provided datafile, should not the client be ready right after initialization?

To Reproduce

You can use this repository to see the issue: https://github.com/oMatej/nextjs-optimizely

I think it can be something related to: #58

[oMatej]

Ok, I think I found what is the issue.

https://github.com/optimizely/react-sdk/blob/master/src/hooks.ts#L108-L160

Here we have a useClientInitializationState hook, that will update clientReady and didTimeout inside useEffect when Optimizely becomes ready. The values from that hook are later on returned by useExperiment and useFeature.

However, both useExperiment and useFeature are not aware of changes to clientReady and didTimeout that happens after optimizely.onReady({ timeout: finalReadyTimeout }) execution. Because of that, decisionState has { variation: null } as initial state, and it is not updated when clientReady is equal to true: https://github.com/optimizely/react-sdk/blob/master/src/hooks.ts#L191-L197.

Because of that, https://github.com/optimizely/react-sdk/blob/master/src/hooks.ts#L210 is not executed, because previous and current decisionInputs are equal. And this line: https://github.com/optimizely/react-sdk/blob/master/src/hooks.ts#L216 is also not executed because we provided the user object during the initial render.

There is a workaround to tackle this case (but it causes differences between client & server renders). Even though we have user and datafile from the beginning, we cannot provide them to OptimizelyProvider immediately. Instead, we can wait for the onReady promise to be fulfilled, and update the user object when this happened. This will trigger this callback: https://github.com/optimizely/react-sdk/blob/master/src/hooks.ts#L216.

    // We need to modify these lines: https://github.com/oMatej/nextjs-optimizely/blob/test/optimizely/withOptimizelyProvider.js#L10-L31
    const WithOptimizely = ({ datafile, id, ...props }) => {
        const { query } = useRouter();

        const optimizely = getOrInitializeOptimizely({ datafile, isBrowser });

        const [ready, setReady] = useState(false);

        const user = useMemo(() => {
            return {
                id,
                attributes: { ...query, ready }
            };
        }, [id, query, ready]);

        useEffect(() => {
            optimizely.onReady().then(() => {
                setReady(true);
            });
        }, [optimizely]);

        return (
            <OptimizelyProvider
                optimizely={optimizely}
                user={user}
                isServerSide={!isBrowser} // we can use here `!ready`, so there will be no differences between client & server, but then there is a problem with event listeners
            >
                <PageComponent {...props} />
            </OptimizelyProvider>
        );
    };

However, I think it should be solved inside useExperiment and useFeature hooks.

---

Also, should not Optimizely instance be initialized synchronously, when datafile and user are provided from the beginning?

[drazenbuljovcic]

I have the same issue, the optimizely datafile is fetched during server side rendering, and bound to the window object for the client to pick it up. The issue is not related to Next.js, I have a custom implementation.

Once that happens the optimizelyInstance is initialized on the client side with the datafile and the user already there (also populated during SSR).
The app proceeds with rendering and comes across the component which uses useExperiment hook, the returning value for variation is null.

If I call optimizelyInstance.getVariation(<experiment>) manually the correct variation identifier is returned.

At any point the component is not re-rendered by useExperiment so the variant remains null at all times.
The same applies when using OptimizelyExperiment hoc, the default variation is always rendered.

The data does not seem to be consistent between the instance (optimizelyInstance) itself and the ReactSDK.
I can see the log from the main optimizely-sdk lib which contains the correct data.
https://github.com/optimizely/javascript-sdk/blob/8028443919aa6beea06564324621189f911e8f29/packages/optimizely-sdk/lib/utils/enums/index.ts#L118

@oMatej Nice solution!

[rrdelaney]

Can confirm this is still an issue. Any chance for a fix soon?

[BartJanvanAssen]

Confirm as well, any chance for a fix anytime soon?

[rrdelaney]

To be clear this issue is blocking my team from becoming Optimizely customers and we are actively looking at integrating competitors such as LaunchDarkly. Please maintain your SDK's.

[8enSmith]

This issue is now over seven months old. Any update on when this issue is going to be addressed?

[will-stone]

Hi @oMatej 👋 The !ready solution appears to work well. Can you explain what you mean by "there is a problem with event listeners"?

[oMatej]

@will-stone I wanted to register notification listeners for optimizely instance created inside this WithOptimizely HOC (inside some additional useEffect). The problem with using !ready for isServerSide prop was that in such a case these listeners were, most probably, registered for the instance of optimizely that was replaced after updating the value of ready. So when the ready state changed, they stopped triggering provided callbacks.

As far as I remember, the working alternative was moving the logic responsible for setting them up directly to getOrInitializeOptimizely function, but on the other hand, it made it impossible to update these listeners based on some props of the HOC, and so on.

[will-stone]

Thank you @oMatej for the quick reply 😄 Okay, I'm not sure we need to use those so looks like the !ready solution should be enough for our needs. Thanks for that too!

[zashraf1985]

The issue was automatically closed by Github when the related PR got merged. This was not intended. Reopening the issue and will soon share an Alpha release based on the fixes done in this PR.