how do you supply a decision from server-side rendering to client-side rendering?

[iamstarkov]

1. I run createInstance on both server and client to get optimizely client.
2. I run client.setUser({ id: userId }) with the same user id and attributes on both server and client.
3. I use <OptimizelyProvider optimizely={client} user={{ id: userId }}> and both server (with isServerSide prop) and client.
4. I use useDecision hook on both server and client and use the derived decision to render true or false if feature flag is disabled or not.
5. Sometimes I get the mismatch between SSR and CSR.

I have tried to run client.decideAll() to get serialisable decisions on the server and tried to supply it to client-side created instance of the client, but I could not find a way to do it. Can you help?

[mikechu-optimizely]

Hi @iamstarkov,

Let me research on this and speak with one of the JS devs specifically.

[mikechu-optimizely]

Relates to #186

[tareqlol]

Hey @mikechu-optimizely, Any updates on this?

[mikechu-optimizely]

@junaed-optimizely Can we pair up on SSR & CSR when you're back from holiday? DM me please 😄

[mikechu-optimizely]

We have a work epic (series of tickets) to create a starter-kit or examples for CSR, SSR, and hybrid. We have already identified some rough edges that we want to provide guidance around or software updates to resolve. We'll start the first of these tickets in an upcoming sprint to show reference implementations. Please stay tuned.

[ricky-harrys]

@mikechu-optimizely Any update on this? Specifically looking for details around implementing Optimizely FX in Remix on Cloudflare Pages.

[mikechu-optimizely]

@junaed-optimizely, I don't see an FSSDK backlog entry for this. Do you have any updates?

If not, can you write a story and note the ticket here? We need to put together more info in around our SSR vs CSR implementation.

[junaed-optimizely]

@iamstarkov, I am curious to know about the mismatch in detail. Also it would be nice to know more about the implementation detail as well, like what framework are you using, and how and where you are creating the instance! Here is a POC that might be helpful - nextjs-optimizely.

[junaed-optimizely]

@mikechu-optimizely, I agree 100%. Our documentation does not have enough implementation detail on SSR. I have created an internal ticket FSSDK-10777 to address this.

[cgutierrez-gfm]

@junaed-optimizely @mikechu-optimizely We're encountering a similar issue after upgrading from v3.2.2 to v3.2.3. In v3.2.2, clientReady = true from the initial render when we sent the datafile from the server. But in v3.2.3, clientReady always starts as false and eventually settles to true, leading to SSR hydration errors because of the mismatch between client and server. Is there a recommended way to handle this discrepancy?

[junaed-optimizely]

@cgutierrez-gfm, its possible to pass isServerSide = true in the OptimizelyProvider to avoid hydration error.

If you have done it already and still facing issue, then could you please share some more implementation detail or maybe some code snippets so that we can understand the issue better.

[cgutierrez-gfm]

@junaed-optimizely we are passing isServerSide = true on the server. Are you suggesting we use isServerSide = true on both server and client?

[junaed-optimizely]

Yes @cgutierrez-gfm, It should be same for both.

[cgutierrez-gfm]

Hey @junaed-optimizely, that worked, thanks! Just a heads-up that in the nextjs example here: https://github.com/oMatej/nextjs-optimizely/blob/test/optimizely/withOptimizelyProvider.js isServerSide is set as isServerSide={!isBrowser}, which is what were doing in our app too. Maybe it would be a good idea to update the example.