Using own React components while fetching page contents in the backend?

[martin-braun]

First of all, outstanding project. This really has potential, because it provides a solid builder while still giving full control of its implementation. If I understand the documentation right, I cannot use the HTML API when I want to implement my own React components in my builder. I'm really looking forward to jsx-lite, because it will allow to bypass this issue entirely.

Until then, I wonder what I can do, because GDPR will force me to get permission from the user to make a request to your React API in the front-end. Only if I do so, I can hook my own components into your builder, properly.

But now I wonder, what if I call ...

builder.get('page', { url: '/' })

... in an express backend and deliver the resulting pageJson to the front-end to attach it to the BuilderComponent, so that I can avoid the direct call to your server from the front-end?

Is this possible?

[mandx]

Something you can try is hit Builder's APIs directly from your backend and from it return it to your frontend, fetching it during route handling, cache it or whatever is needed, then return it as part of the response to the frontend. Then in your frontend:

import { BuilderComponent } from '@builder.io/react';

export default function Homepage({ builderContentFromMyApi, ...props }) {
  return <div>
    <p>some static content... </p>
    <BuilderComponent content={builderContentFromMyApi} model="page" />
    <p>more static content</p>
  </div>
}

The model prop has "page" as a value because that's what we fetched in the builder.get() call, if you fetch a different model (like, for example "amp-page") the model prop must change as well.

You might also have to apply some of the advice here to ensure the Builder SDK is GDPR compliant.

[martin-braun]

Thank you, I will give it a try, soon. 👍

[mandx]

@martin-braun My comment in the snippet I shared: First, its BuilderComponent (not BuilderPage), and you need to add the model prop to it, like:

    <BuilderComponent content={builderContentFromMyApi} model={contentModel} />

Where content model could be 'page' (the initial model you get when you start using Builder), or whatever model name you are using to fetch content (the first argument you used when calling builder.get().

I'll edit my initial comment to avoid confusion

Thanks to @teleaziz for catching this!