# Page fields in custom components are not updated in preview

**URL:** <https://forum.builder.io/t/page-fields-in-custom-components-are-not-updated-in-preview/3698>\
**Category:** Technical Questions\
**Tags:** visual-editor, nextjs\
**Created:** [June 8, 2023, 7:14am UTC](https://forum.builder.io/t/page-fields-in-custom-components-are-not-updated-in-preview/3698 "2023-06-08T07:14:21Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![Simon](https://avatars.discourse-cdn.com/v4/letter/s/f07891/32.png) [@Simon](https://forum.builder.io/u/Simon)\
**Post date:** [June 8, 2023, 7:14am UTC](https://forum.builder.io/t/page-fields-in-custom-components-are-not-updated-in-preview/3698/1 "2023-06-08T07:14:21Z")

</div>

**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:

```auto
//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?](https://forum.builder.io/t/is-it-possible-to-access-page-fields-in-data-bindings/3393)

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

---

<div class="post-metadata">

**Author:** ![Simon](https://avatars.discourse-cdn.com/v4/letter/s/f07891/32.png) [@Simon](https://forum.builder.io/u/Simon)\
**Post date:** [June 9, 2023, 12:06am UTC](https://forum.builder.io/t/page-fields-in-custom-components-are-not-updated-in-preview/3698/2 "2023-06-09T00:06:24Z")

</div>

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.