Realtime update using api if you don't want data to be outside the Content component

Technical Questions
1

We’re setting up a blog post and would like the data to update in realtime as it would a custom component. However, we’re using fetchOneEntry and then locking down specific pieces of the page data such as title, date etc so that it can’t be dragged or moved around. Is this the best way to achieve this and is there a way for the visual editor to show the changes immediately?

export default async function Page(props) {
  const { handle } = props.params;
  const apiKey = process.env.NEXT_PUBLIC_BUILDER_API_KEY;

  const urlPath = "/blog" + "/" + handle;

  const  content = await fetchOneEntry({
    options: props.searchParams,
    apiKey: apiKey,
    options: { enrich: true },
    model: 'blog',
    includeRefs: true,
    userAttributes: { urlPath },
  });

  const { data } = content;
  const author = data.author ? data.author.value.data : null;

  const formatDate = (date) => {
    const dateFormat = new Date(date);
    const options = { month: 'long', day: 'numeric', year: 'numeric' };
    
    return dateFormat.toLocaleDateString('en-US', options);
  }

  return (
    <>
      <div className="container mx-auto py-4 lg:py-8">
        <div className="heading relative font-sans text-center">
          { data?.date && <p className="text-black text-[16px] font-medium">
            {formatDate(data?.date)}
          </p>}

          <h1 className="
            text-lg sm:text-xl md:text-[44px] md:pb-6 pb-4 mb-4 md:mb-8 text-primary
            font-bold leading-[2rem] sm:leading-[3.5rem] md:leading-[4.75rem]">
            {data?.title}
          </h1>
          <div className="absolute md:bottom-[-10px] bottom-0 right-0 left-0 mx-auto w-[150px] border-b border-1 border-charcoal mb-3"/>
        </div>

        { author && 
          <div className="flex flex-row items-center justify-center mx-auto w-auto my-4 md:my-6">
            {author.profileImage &&
              <img src={author.profileImage} alt={`${author.fullName} profile image`}
              className="w-[40px] h-[40px] object-cover object-center rounded-full mr-4" />}

            <div className="flex flex-col justify-center">
              <span>{ author.fullName }</span>

              { author.description && <span className="text-grey text-md">{ author.description }</span>}
            </div>
          </div>
        }

        <img
          src={data?.image}
          alt="blog hero image"
          className="w-full h-auto max-w-[1200px] max-h-[700px] mx-auto mt-8 object-cover object-center"
        />

        <Content
          content={content}
          apiKey={apiKey}
          model={"blog"}
          customComponents={[TextBlockComponent]}
        />
      </div>
    </>
  );
}
2

Hello @jimjiminyjimjim,

That is certainty one way to avoid certain blocks from preventing drag and drop in the editor, another option could be to prevent certain elements from being dragged or moved, you can lock them in the Builder visual editor. This is done by setting locks on specific elements within the editing interface, ensuring that the non-developer users cannot alter the structure. This will maintain your design layout while allowing for real-time data updates.

You can implement real-time updates using Builder’s state and actions capabilities. This allows you to bind dynamic data to components, which will update automatically as the data changes.

We hope this helps!

Thanks,