Content API prerendering multiple items

Technical Questions
1

Good morning everyone,

I am trying to get multiple prerendered items from the section model to display on the same page, but only the first one comes prerendered. Is it possible to retrieve several prerendered items?

Here is the request i am making:

https://cdn.builder.io/api/v3/content/entry-page-messages?limit=5&apiKey=6bdfd3f286da46e1a72110ce56bd844c&prerender=true&data.userName=Hans&query.$or=[{"data.target":{"$or":["all","welcome_default","welcome_back"]}},{"data.target":"utm_campaign","data.utmCampaign":"website-erstellen-kostenlos"}]&fields=id,data.html,data.buttonText,data.buttonLink,data.buttonTrackName,data.persistent

Thanks in advance

2

Hello ruimartins,

Please feel free to share your code and implementation of the request. I may be able to provide better guidance if I can see the implementation.

Thank you,

3

Thanks @JuliusGD for your patience helping me.
I am just trying to call builder.io with postman, so no code, i am just making the request to check if what i want is possible.
My goal is to get a list of prerendered items based on my query rules, but in the requests i am making, only the first item comes prerendered.

Thanks again!

4

Hello @ruimartins,

Yes, you can retrieve multiple prerendered items from a section model and display them on the same page. You need to fetch each section individually using the Builder API and render them.

Create or update a Next.js page to fetch and render multiple sections from the Builder model. For example, in app/page.tsx :

// app/page.tsx
import React from 'react';
import { builder } from '@builder.io/react';
import Head from 'next/head';
import { RenderBuilderContent } from '@/components/RenderBuilderContent'; // Adjust the import path accordingly

// Initialize Builder with your API key
builder.init('YOUR_API_KEY');

interface PageProps {
  params: {
    page: string[];
  };
}

export default async function Page(props: PageProps) {
  const sectionModelName = "section"; // Change to your section model name

  // Fetch multiple sections
  const [section1, section2, section3] = await Promise.all([
    builder.get(sectionModelName, { query: { 'data.sectionName': 'section1' }, prerender: false }).toPromise(),
    builder.get(sectionModelName, { query: { 'data.sectionName': 'section2' }, prerender: false }).toPromise(),
    builder.get(sectionModelName, { query: { 'data.sectionName': 'section3' }, prerender: false }).toPromise(),
  ]);

  return (
    <>
      <Head>
        <title>Multiple Sections Page</title>
      </Head>
      <div>
        <RenderBuilderContent model={sectionModelName} content={section1} />
        <RenderBuilderContent model={sectionModelName} content={section2} />
        <RenderBuilderContent model={sectionModelName} content={section3} />
      </div>
    </>
  );
}

Create a reusable component to render the Builder sections.

// components/RenderBuilderContent.tsx
"use client";
import { BuilderComponent, useIsPreviewing } from "@builder.io/react";

interface BuilderComponentProps {
  content: any;
  model: string;
}

export function RenderBuilderContent({ content, model }: BuilderComponentProps) {
  const isPreviewing = useIsPreviewing();

  if (content || isPreviewing) {
    return <BuilderComponent content={content} model={model} />;
  }

  return null;
}

You can find more information on creating Section Models and Custom Fields in the Builder documentation.

By using the builder.get method with Promise.all, you can fetch and prerender multiple sections and render them on the same page.

5

Can you provide a example of the below solution as Nuxt3? I’m having issues with import { builder } from “@builder.io/sdk-vue” builder doesn’t exists.