BuilderComponent doesn't work in Next.js 13 server components (using app router)

Technical Questions
1

I’d like to statically generate my site (pages including content are generated as html during build time, e.g. using output: “export”), but when I include

<BuilderComponent content={content} />

on my page, I get an error:

Error: createContext only works in Client Components. Add the “use client” directive at the top of the file to use it.

How can I include builder components in a server component?

1 Like
2

The best solution I have found so far is to fetch the page data through the content API in a server component, and pass it to a child client component which contains the imports
BuilderComponent, builder to render the page. This is needed because the different Builder components use React.createContext, which are not supported in a server component.

1 Like
3

Are there any plans by the builder team to have the BuilderComponent or an alternative component support react server components in the future? :thinking:

2 Likes
4

You can update to React Canary version, then just follow these instructions and adapt it to app router: SSR and SSG - Builder.io

// See more: https://react.dev/reference/react/use
import { use } from "react"
import { builder } from "@builder.io/react"
import { getAsyncProps } from "@builder.io/utils"

async function fetchContentPage() {
  const content = await builder.get("page").promise()
  // wait until the data arrives before rendering
  await getAsyncProps(content)
  return content
}

export default function MyPageOrComponent() {
  const pageContent = use(fetchContentPage())

  return <BuilderComponent model="page" content={pageContent} />
}