How to Add and Manage Multiple Zones in a Hard-Coded Page Using Builder.io

Technical Questions
, ,
1

I am working on a hard-coded page that requires multiple zones (e.g., carousel, banner, feedback) to be dynamically loaded using Builder.io. Currently, I am using the builder.get method to fetch content for each zone, but the content from one zone seems to affect others.

export default async function HomePage() {
  const builderContent = await builder
    // Get the page content from Builder with the specified options
    .get("page", {
      userAttributes: {
        // Use the page path specified in the URL to fetch the content
        urlPath: "/home",
      },
      // Set prerender too false to return JSON instead of HTML
      prerender: false,
    })
    // Convert the result to a promise
    .toPromise();

  return (
    <main>
      <section>
        <RenderBuilderContent
          model="page"
          content={builderContent}
          entry="carouselentry"
        />
      </section>
      {/* Zone for dynamic Builder.io content */}
      <section>
        <RenderBuilderContent
          model="page"
          content={builderContent}
          entry="bannerentry"
        />
      </section>
      {/* Zone for dynamic Builder.io content */}
      <section>
        <RenderBuilderContent
          model="page"
          entry="feedbackentry"
          content={builderContent}
        />
      </section>
    </main>
  );
}
2

Hello @SuhaibBaba,

Welcome to the Builder.io forum post.

To query and add multiple Builder components from the same model, please refer to the forum post below.