Symbol with Content Input causes hydration errors in Next.js

Bugs
,
1

Builder content link

Builder public api key
7665eaf231524f07922360adfeffa153

Detailed steps to reproduce the bug
I did a minimal setup to reproduce this error:

  1. Create a blank page.
  2. Create a Symbol “Simple Text Section” that receives a Content Input field dynamicText and displays it on the screen using data biding.
  3. Add the Symbol to the blank page and publish it.
  4. By accessing the page in localhost:3000/blank, I’m getting hydration errors like:
Prop `dangerouslySetInnerHTML` did not match. Server: "" Client: "This is the text being passed from the blank page to symbol's content input" Error

I noticed that this is happening when we have data being bound. Either from the “Content Input”, or using the “Connect Data”. Every time we bound some data to a symbol, it causes hydration errors.

Screenshots or video link

image
image3228×1404 454 KB

image
image2678×1498 249 KB

image
image3456×1836 318 KB

Code stack you are integrating Builder with
NextJS

Reproducible code example
This is my app/[[...page]]/page.tsx setup:

import { builder } from '@builder.io/sdk';
import { RenderBuilderContent } from '../../components/builder';

// Builder Public API Key set in .env file
builder.init(process.env.NEXT_PUBLIC_BUILDER_API_KEY!);

interface PageProps {
  params: {
    page: string[];
  };
}

export default async function Page(props: PageProps) {
  const builderModelName = 'page';

  const content = await builder
    // Get the page content from Builder with the specified options
    .get(builderModelName, {
      userAttributes: {
        // Use the page path specified in the URL to fetch the content
        urlPath: '/' + (props?.params?.page?.join('/') || ''),
      },
      cachebust: true /** @todo check if we need this in production */,
      options: {
        // Enrich the content with the data of the referenced models
        // (e.g. the data of the referenced model "section" will be included in the response)
        enrich: true,
      },
    })
    .toPromise();

  console.log(JSON.stringify(content, null, 2));

  return (
    <>
      {/* Render the Builder page */}
      <RenderBuilderContent  content={content} model={builderModelName} />
    </>
  );
}

And this is the RenderBuilderContent component:

'use client';
import { ComponentProps } from 'react';
import { BuilderComponent, useIsPreviewing } from '@builder.io/react';
import { builder } from '@builder.io/sdk';
import DefaultErrorPage from 'next/error';
import '../builder-registry';
import { builderContext } from '@/builder-context';

type BuilderPageProps = ComponentProps<typeof BuilderComponent>;

// Builder Public API Key set in .env file
builder.init(process.env.NEXT_PUBLIC_BUILDER_API_KEY!);

export function RenderBuilderContent({
  options,
  content,
  model,
}: BuilderPageProps) {
  // Call the useIsPreviewing hook to determine if
  // the page is being previewed in Builder
  const isPreviewing = useIsPreviewing();
  // If "content" has a value or the page is being previewed in Builder,
  // render the BuilderComponent with the specified content and model props.
  if (content || isPreviewing) {
    return (
      <BuilderComponent
        context={builderContext}
        options={options}
        content={content}
        model={model}
      />
    );
  }
  // If the "content" is falsy and the page is
  // not being previewed in Builder, render the
  // DefaultErrorPage with a 404.
  return <DefaultErrorPage statusCode={404} />;
}