BuilderComponent pages render extremely slowly when running locally

[tylerscave]

When running locally, the BuilderComponent from @builder.io/react renders Builder pages extremely slowly and causes the dev server to hang. In our case, this also makes using the Builder content editor pretty difficult.

That said, our project is deployed through Github actions and Oxygen, and the deployed pages load quickly (as expected)

We are using a project based off of the Shopify Hydrogen demo store: https://github.com/Shopify/hydrogen/tree/2023-01/templates/demo-store

The following shows an example use case:

import {builder, BuilderComponent, BuilderContent} from '@builder.io/react';
import {Await, useLoaderData} from '@remix-run/react';
import builderConfig from '../../../builderConfig.json';

builder.init(builderConfig.apiKey);

const BUILDER_MODEL = 'page';

export async function loader() {
  const builderContent = await builder
    .get(BUILDER_MODEL, {
      userAttributes: {
        urlPath: '/',
      },
    })
    .toPromise();

  if (!builderContent) {
    throw new Response('Not found', {status: 404});
  }

  return builderContent;
}

// this gives full compatibility to BuilderContent type and Remix starter
// See: https://github.com/BuilderIO/builder/issues/1387#issuecomment-1397442797
type BuilderContentRemix = Omit<BuilderContent, 'variations' | 'data'>;

export default function Homepage() {
  const builderContent: BuilderContentRemix =
    useLoaderData<BuilderContentRemix>();

  return (
    <Suspense>
      <Await resolve={builderContent}>
        <BuilderComponent content={builderContent} model={BUILDER_MODEL} />
      </Await>
    </Suspense>
  );
}

[tylerscave]

This is most likely related to the work done to solve the issue reported here: https://github.com/BuilderIO/builder-shopify-hydrogen/issues/12

[haunguyenlxag]

Any update for this issue ?

[akshatgarg12]

Hey @tylerscave Can you provide a builder content url to repro this? For my setup the initial load was a bit slow but subsequent reloads are working fine.

[tylerscave]

Hi @akshatgarg12. Thanks for the followup.

After doing some package updates (lost track of which ones since filing this issue) and removing the Suspense/Await logic (which I wasn't using right anyway), I am experiencing something similar to what you are seeing... Subsequent loads to any builder page are now much snappier (even if it is a different builder page than the initially loaded one), but the initial load of a page after starting the dev server is still pretty slow.

I would say that this is still an issue, but much less of one since it has improved on subsequent loads 🤷🏻‍♂️

[haunguyenlxag]

hi @tylerscave ,

I found it to work fine in production mode when deploying oxygen, but the CSS seems to be broken https://remix-hydrogen-builderio-12b686113c107ea885a9.o2.myshopify.dev/builders/testing

[tylerscave]

@haunguyenlxag Our Oxygen deployment seems to be working great for the most part (builder pages are very snappy), but occasionally I see something similar (its like the page only partially loads and needs a refresh).

For us, the issue is mostly around initially loading builder pages on the dev server...

[akshatgarg12]

Hey @tylerscave , can you confirm which versions you are using? I'm getting this error with the latest @builder.io/react: 2.1.0. Just wanted to confirm whether this issue is specific to my hydrogen setup.

[tylerscave]

These are the current versions in our project (we try to stay pretty up to date on everything)

"@builder.io/react": "^2.1.0", "@remix-run/react": "1.15.0", "@shopify/cli": "^3.45.1", "@shopify/cli-hydrogen": "^4.1.1", "@shopify/hydrogen": "^2023.4.0", "@shopify/remix-oxygen": "^1.0.5",

"@remix-run/dev": "^1.15.0",

[mhuretski]

@akshatgarg12 I'm also getting ReferenceError: process is not defined at value (node_modules/@builder.io/react/src/functions/string-to-function.ts:146:13) trying to add Product Box with Image and stuff, if it's removed error doesn't occur. Issue seems related to Shopify section in Builder Editor.

    "@builder.io/react": "^2.1.0",
    "@remix-run/react": "1.15.0",
    "@shopify/cli": "^3.45.1",
    "@shopify/cli-hydrogen": "^4.2.1",
    "@shopify/hydrogen": "^2023.4.3",
    "@shopify/remix-oxygen": "^1.0.7",