Page fields in custom components are not updated in preview

Technical Questions
,
1

Code stack you are integrating Builder with
NextJS - App router.
@builder.io/sdk-react (beta)

What are you trying to accomplish
I have a blog (page) model that has a the following fields: title, image, blurb, tags etc etc
I use these fields to set SEO metadata - works like a charm.

Now I want to reuse these page fields (the content editor has already filled them in after all) to create the Hero section of the page.

This is what I’ve tried:

  1. A custom component in my page.tsx template that uses the page data:
//page.tsx server side component
export default async function Page(props: PageProps) {
//get builder data utilising import { getContent } from "@builder.io/sdk-react/server"  
const content = await getBuilderContent(
    "blog", //model
    "/blog/" + (props?.params?.page || "") //url for user attribute filtering
  );

  return (
    <>
      <div>
       //my component that uses page data
        <BlogHero
          title={content?.page?.data?.title || ""}
          image={content?.page?.data?.image || "/"}
          categories={content?.page?.data?.categories || []}
          author={content?.page?.data?.author?.value?.data || "Author"}
        />
      </div>
     //my builder client component that uses import { RenderContent, isPreviewing } from "@builder.io/sdk-react";
      <BuilderPage builderContent={content.page} model="blog" />
    </>
  );
}

This approach works great until I need to edit the page. Say I change the page title, in the editor, then the component does not update - the preview is out of sync. I assume this is because my component is “outside of builder” and the actual page data is loaded server side and at this stage, during edit/preview, the data is stale?

  1. Next attempt. I ditched the above and instead I made the above BlogHero component available to Builder UI. I then planned to bind the BlogHero custom component inputs to the page fields. To date I have not been able to make this work.

This is the only reference I could find that mentions using page fields in data bindings but it does not work for me: Is it possible to access Page Fields in data bindings?

So, how do I use page fields in say a page Hero such that when editing in builder the user sees realtime updates??

2

Upon further investigation I believe it’s because I’m using RenderContent component from “@builder.io/sdk-react” . It seems by using this component then context isn’t set up. I’ll raise a different issue after further exploration.