API Data source (Content API-data) seems to be called twice


I followed the tutorial, but there seems to be a bug with the content API data called twice:
(tutorial: Connecting your API data to builder - Builder.io)

Builder content link

Builder public api key

Detailed steps to reproduce the bug

Now, everytime I call the page, the API seems to be called twice, because the title names quickly display with random names A and then switch to random names B (as the API delivers correctly).

Hi @3VI, welcome to the forum! This is a good question. You see the data flash due to the nature of the random user API. The data source gets called twice because Builder pre-renders content server-side first before re-hydrating the page in the browser. Since the random user API returns a new set of users on each fetch there is a brief flash of the users fetched from the initial server side call.

To prevent the mismatch you can delay the rendering to the browser by adding a showIf: state.ready binding to the content so that only the fetch which is called client-side gets rendered. Alternatively, instead of adding the data source in the Content API data section of the Data tab, you can perform the fetch in your custom JS and wrap it with a Builder.isBrowser conditional. Then it will only be fetched once when the browser is ready.

Demo: https://builder.io/fiddle/b4dc662f3ca9483e9436ed11d3fba61c