SSR and SSG on Next.js with AppRouter

Technical Questions CMS
1

HI!
I have a next.js app that integrates builder.io and BigCommerce to manage the frontend of an ecommerce.
In my integration I am trying to use builder.io (as well as a CMS) to define the layout of the product page to which the data retrieved from the BigCommerce API will then be dynamically passed.

export function RenderBuilerSection({ content, model }: BuilderPageProps) {
  const isPreviewing = useIsPreviewing();
  if (content || isPreviewing) {
    //Product data comes from bigCommerce API
    return <BuilderComponent data={productData} content={content} model={model} options={{cache: true, cachebust: true}}/>;
  }
  return <ErrorRender model={model} />
}

These pages must be generated server side to be SEO friendly and to improve performance.
Now, the problem is that with the “AppRouter” approach it is not possible for me to use the “BuilderComponent” component in a server component. I would like to understand if I’m doing something wrong or if this is actually a limit of my stack and if I have to use Next’s “Pages” approach

2

Hello @EddieTB,

Welcome to the builder.io forum post.

You may find help at the below link

3

Hi @manish-sharma thank you for fast answer!

I’ve already read this page and it’s a not totally clear for me, 'couse it say to use
getStaticProps combined with getAsyncProps but, with new approach “AppRouter” the getStaticProps was abandoned and now it is automatically inside the fetch function as you can read here.

And if i try to use BuilderComponent in a non ‘use client’ component i got this error

Screenshot 2024-02-17 alle 11.03.42
Screenshot 2024-02-17 alle 11.03.422086×1624 353 KB

Where is my mistake? Maybe i have to use getAsyncProps combined with fetch in some way?

4

Hello @EddieTB,

It appears that our GEN1 React SDK doesn’t support server-side components. As an alternative, we suggest using our Builder NextJS SDK, @builder.io/sdk-react-nextjs. This SDK is specifically designed for use with NextJS’s app directory and includes essential dependencies tailored to NextJS-specific functionality.

You can find more information about its usage in our documentation: Builder NextJS SDK README.

If you have any questions or need further assistance, please don’t hesitate to let us know!

5

Hello @manish-sharma
I’m implementing this solution and it’s seems to works fine!

Thanks a lot!

6

Hi @manish-sharma,
We’re facing some similar situation. I’d like to upgrade my project to the GEN2 nextjs sdk to leverage the benefits of server-side components.
Would you please show how to properly register a component which accepts children? Which would be the replacement in GEN2 for the following code?

Builder.registerComponent(
  withChildren(dynamic(() => import("./components/builder/AwesomeComponent"))),
  {
    name: "AwesomeComponent",
    inputs: [
      { name: "title", type: "text" },
      { name: "subtitle", type: "text" },
    ]
  }
);

Thanks in advance!

7

Hello @mstekl,

Builder’s Gen 2 SDKs don’t require withChildren() . For more information on the SDKs, visit SDK Comparision.

For more details on child-related options when working with child components, visit the canHaveChildren, childRequirements, and defaultChildren sections of the registerComponent() documentation.

8

Can you link to a working example for server side rendering with @builder.io/sdk-react-nextjs please?

9

Running into the same issue.

10

Hello @octagon, @RobLokalist,

You can find a working example of Nest JS SDK at the below Github link