https://www.growthbook.io/ logo
#announcements
Title
# announcements
c

cool-airline-75608

01/06/2023, 1:29 PM
I have a question, if the fetch features here fail due to network reasons, the value calculated by useFeature is null, how to deal with this situation, thanks https://docs.growthbook.io/guide/nextjs-and-growthbook
f

fresh-football-47124

01/06/2023, 1:34 PM
Hi Xinzhe, if the feature payload is not loading, it will default the flags to off. You can set default values for non boolean flags with the getFeatureValue method:
getFeatureValue("my-feature", 123)
c

cool-airline-75608

01/06/2023, 1:44 PM
Thank you for your answer, My scene here is like this; The test component has re-render; if default-value is set,
getFeatureValue("my-feature", 123)
may return different values ​​in the two renderings of the test component; the UI of the page will also change accordingly. This is something we don't want to see.
f

fresh-football-47124

01/06/2023, 1:45 PM
ah, i see - there are some ways to avoid this flickering/changing state. @future-teacher-7046 do you have some tips?
or @brave-lion-50494?
c

cool-airline-75608

01/10/2023, 7:47 AM
Is there no solution to this problem?
s

swift-helmet-3648

01/10/2023, 8:27 PM
Hi @cool-airline-75608, if there is a network failure when fetching features, you’ll have to handle the fallback yourself - I would suggest implementing a
catch
statement to handle that case.
Copy code
fetch(FEATURES_ENDPOINT)
  .then((res) => res.json())
  .then((json) => {
    gb.setFeatures(json.features);
  })
  .catch((e) => {
    // notify error reporting e.g. sentry
  });
As for flickering UI, there are a couple ways to address this. The ideal way would be to have a server-side rendering (SSR) solution. Frameworks like Next.js provide this out of the box. With Next, you should be able to evaluate features on the server-side before sending a payload to the client. Let me know if you have any more questions about this!
c

cool-airline-75608

01/11/2023, 1:26 AM
Thank you @swift-helmet-3648, we use next's ssg rendering method; My current approach is to save a copy of fallbackFeatures in the code; FallbackFeatures is a copy of features:
Copy code
fetch(FEATURES_ENDPOINT)
  .then((res) => res.json())
  .then((json) => {
    gb.setFeatures(json.features);
  })
  .catch((e) => {
    // notify error reporting e.g. sentry
    gb.setFeatures(FallbackFeatures);
  });
This scheme obviously has many disadvantages.
h

happy-autumn-40938

01/15/2023, 8:20 AM
Hi @cool-airline-75608, we're working on an SDK update to be released this month that should help address your concern. The SDK will handle feature persistence, local caching, and updates. This feature repository works across backend and frontend implementations, and is Next.js SSR friendly (greatly reduces flickering and state-mismatch issues).
👍 1
37 Views