BuilderComponent Hydrogen SSR

[guibovo]

I'm trying to use the BuilderComponent as SSR so I can be able to fetch Shopify Product data from the handle in a Builder Custom Component.

I've seen this issue but I was not able to find any follow-up on this. Is there any update on it?

Shopify/hydrogen#631

[steve8708]

ah yes, the problem here is that server components can not be loaded inside client components. getAsyncProps is how people today support components that need data within Builder - lmk if this helps explain well enough

[guibovo]

Thanks Steve, but I believe we do not have access to this on a component level, only on page level, is that correct?

I mean, my goal is to create a custom component to be used on Builder IO like a Product Card, and whoever is editing pages can use this anywhere since the component would fetch the data itself.

[steve8708]

Oh no this is totally reusable, the util just finds when a component is used, and any time it's used in any place it'll bring in the data it needs, so the component is exactly like you describe: a custom component people can drop anywhere in Builder and it'll fetch the data itself when/where used automatically

Adding @teleaziz to help explain in a bit more detail

[teleaziz]

Hi @guibovo , we have it on our roadmap to add full react server components support so you can fetch data within the component code, for now you can bake the required data into the builder json, which will get passed to the component as a prop, so for this case:
https://github.com/BuilderIO/builder-shopify-hydrogen/blob/main/src/pages/landing/%5Bhandle%5D.server.jsx#L11-L13

const content =  await builder
      .get(MODEL_NAME, {
        userAttributes: {
          urlPath: props.pathname,
        },
      })
      .promise();

// bake async data into the json passed to the BuilderComponent

await getAsyncProps(content, {
     async ProductCard(props) {
        if (props.productId && typeof props.productId === 'string') {
          const productObject = await fetchProductById();
          return {
            productObject,
          }
        }
     },
})

return content;

Now in your custom component you'll get the props.productObject pre-fetched when rendering

For a more concrete examples recommend checking our Next.js + Shopify starter, especially this file where we fetch all the custom components's required data
Let me know if you have any questions!

[otavioserraamyris]

Hello guys! I am struggling to create the routing in my project, in which I am using Hydrogen with buider.io. Has anyone already tried that stack? We have a considerable e-commerce on Shopify and we're considering this stack for us

[guibovo]

Hi @guibovo , we have it on our roadmap to add full react server components support so you can fetch data within the component code, for now you can bake the required data into the builder json, which will get passed to the component as a prop, so for this case: https://github.com/BuilderIO/builder-shopify-hydrogen/blob/main/src/pages/landing/%5Bhandle%5D.server.jsx#L11-L13

const content =  await builder
      .get(MODEL_NAME, {
        userAttributes: {
          urlPath: props.pathname,
        },
      })
      .promise();

// bake async data into the json passed to the BuilderComponent

await getAsyncProps(content, {
     async ProductCard(props) {
        if (props.productId && typeof props.productId === 'string') {
          const productObject = await fetchProductById();
          return {
            productObject,
          }
        }
     },
})

return content;

Now in your custom component you'll get the props.productObject pre-fetched when rendering

For a more concrete examples recommend checking our Next.js + Shopify starter, especially this file where we fetch all the custom components's required data Let me know if you have any questions!

This worked perfectly on NextJS Commerce, however I just heard that the company is moving with Hydrogen, in which I'm struggling to be able to do the same I did on Next.

With that in mind, perhaps you have nay functional example with Hydrogen?