https://www.growthbook.io/ logo
Powered by
o

orange-rocket-9599

01/24/2023, 10:52 PM
Hi! I'm setting up a PoC for client-side React and running into a strange issue. My feature values are serving correctly for one render cycle after setup but then falling back to the default again. I've been troubleshooting it this afternoon and found that 
useGrowthbook().ready
is being set back to false. The configuration looks simple enough, so I'm not sure where I'm going wrong here. Any advice would be appreciated
Inside `src/pages/_app.tsx`:
Copy code
const gb = new GrowthBook({
    apiHost: "<https://cdn.growthbook.io>",
    clientKey: "<our_key>",
    enableDevMode: query["debug_experiments"] === "true",
    trackingCallback: (experiment, result) => {
      // TODO: Use your real analytics tracking system
      console.log("Viewed Experiment", {
        experimentId: experiment.key,
        value: result.value,
      });
    },
  });
and then
Copy code
useEffect(() => {
    // Load features from the GrowthBook API
    gb.loadFeatures()
      .then(() => {
        // Redacted loggedOutId logic
        console.log("Setting GB attributes");
        gb.setAttributes({
          id: loggedOutId,
          path: asPath.split("?")[0],
        });
      })
      .catch(err => {
        console.log("ERROR LOADING FEATURES", err);
      });
  }, []);
f

fresh-football-47124

01/24/2023, 10:54 PM
are you using nextjs?
o

orange-rocket-9599

01/24/2023, 10:54 PM
Yep
f

fresh-football-47124

01/24/2023, 10:55 PM
you’re probably hitting some server side/client side rendering issues
we just released some examples on how to handle this
o

orange-rocket-9599

01/24/2023, 11:01 PM
That seems believable. The page is static ISR/ODB so we were trying to set this up with Growthbook fetching the feature config client-side (to avoid needing to rebuild). I see the example for static has it on the server side, while the 
_app.tsx
there looks like what we want. But the only difference that I see compared to what I tried is the use of 
decryptionKey
, so I'm not sure why that configuration isn't working for us
f

future-teacher-7046

01/24/2023, 11:13 PM
There's nowhere in the SDK code that sets the 
ready
flag back to false. My guess is that it's creating a 2nd instance of GrowthBook and that one isn't calling 
loadFeatures
👀 1
o

orange-rocket-9599

01/24/2023, 11:20 PM
Yep good call, that seems to be the issue. I'm not sure why our 
_app.tsx
is getting re-rendered immediately but that's overwriting the 
gb
instance that had its attributes & features set inside a 
useEffect
. I should be able to figure that out on my end - thanks for the advice!
f

future-teacher-7046

01/24/2023, 11:25 PM
Since you are using ISR anyway on that page, you could also do a hybrid approach where you get features at build-time, and then the client takes over and renders in the latest feature values if they've changed since then. It can help avoid some flickering since without that, all features start as "OFF" in the initial HTML. There's an example in that repo of this approach - https://github.com/growthbook/examples/blob/main/next-js/pages/static-hybrid.tsx
o

orange-rocket-9599

01/24/2023, 11:26 PM
Yeah I was looking at that, could be promising for our use case. For now I just want to get the minimal proof of concept up to help make the case for GrowthBook, but I'll definitely look into it more if we've got the green light. Thanks!
For posterity in case this happens to anyone else - we didn't realize that 
_App
is actually intended to render twice in many cases. I must've been going through the setup without paying full attention, as actually following the steps correctly and initializing the GrowthBook instance outside of the 
App
component works perfectly fine. The problem only happens when running 
_const_ gb = _new_ GrowthBook({
inside of 
App
. Sorry about that and thanks for getting me an answer so quickly!
🙌 1
4 Views
Powered by