How to prevent flicker when fetching builder content in a React app?

Hello everyone,

I’m working on integrating Builder content into my React app while keeping a static layout with a navbar and footer, similar to the approach described here.

In my app, I use the following code for data fetching:

  React.useEffect(() => {
    fetchOneEntry({
      model: getModelName(window.location.pathname),
      apiKey: BUILDER_API_KEY,
      userAttributes: {
        urlPath: window.location.pathname,
      },
      options: getBuilderSearchParams(new URL(location.href).searchParams),
    })
      .then((content) => {
        if (content) {
          setContent(content);
        }
        setNotFound(!content);
      })
      .catch((err) => {
        console.log("Oops: ", err);
      });
  }, []);

I then render the content using the <Content /> component (imported from @builder.io/sdk-react), passing the content state as a prop.

The issue I’m facing is the flicker that occurs because the data fetching takes some time. Initially, only the navbar and footer are displayed on the screen until the content is fetched.

To handle this, one solution I thought of is to return null if the content hasn’t loaded yet, like so:

if (!content) return null;

However, this causes a blank white screen while the data is being fetched, which is not ideal.

Does anyone have a more elegant solution to handle this? I’d appreciate your suggestions!

Hi xPawel, what you’re describing sounds like the behavior of “client-side-rendering”, and any React code wrapped in a useEffect() will only ever run client-side.

Depending on your framework, you will probably want to look into ways to run the content fetching asynchronously, during your server-side rendering, so your page initially loads with the Builder content pre-rendered.

Builder’s docs on Server-side Rendering:

The best-practice example you’re referencing matches the React + No Framework + Gen2 SDK example, which matches the best practice for a framework-less, pure react project, but it sounds like you’re hoping to leverage Server-side Rendering, which usually requires a React framework. Check out the other examples on the best practices docs page for Next.js or Hydrogen examples, which will show other ways to accomplish the behavior you’re looking for!