Preview URL not contain edited content

General
1

After editing content on the edit page , without publishing but simply clicking on preview → view current draft, the opened page（(http://localhost:3000/xxxx)） will not be able to get the latest content if useEffect is not used to retrieve the content.

demo: builder/examples/nextjs-pages-dir-v2/src/pages/[[...page]].tsx at main · BuilderIO/builder · GitHub

export default function App(props: Readonly<{ page: BuilderContent | null }>) {
  const router = useRouter()
  const [content, setContent] = useState<BuilderContent | null>(props.page)

  useEffect(() => {
    if (isPreviewing()) {
      const userAttributes = { urlPath: window.location.pathname || '/' }
      fetchOneEntry({ model: 'page', apiKey, userAttributes }).then(content => {
        setContent(content)
      })
    }
  }, [])

  const canShowContent = props.page || isPreviewing(router.asPath) || isEditing(router.asPath)

  if (!canShowContent) {
    return <DefaultErrorPage statusCode={404} />
  }

  return <Content model="page" customComponents={CUSTOM_COMPONENTS} content={content} apiKey={apiKey} />
}
2

Hey @radis please share your Builder Content Entry link where you’re experiencing an issue as it this will me further my investigation?

Here is how to find it:

1576×458 33.4 KB

Could you please share your integration code as well?