Hydration error with getServerSideProps on Builder - NextJS

General
,
1

We’re using Next.js to deploy our pages, and I’m running into a hydration error. Currently, I’m using getServerSideProps. When I console.log, I can see the object. For example:

export const getServerSideProps: GetServerSideProps = async ({ params }) => {
const value = await getMyInformation()
console.log(value)
...
return {
    props: {
      page,
      showroomSlug: value,
    },
  }

We’re passing the object through the data attribute like this:

<BuilderComponent model="page" content={page} data={{ showroomLocations }} />

On our page, we have two React components. When I console log the object inside this object on our server, the value is null.

const MyPageContainer = ({
...
value
}: MyPageContainerProps) => {

  console.log('Directory', value)

Vercel Logs

Directory { showroomLocations: null }

On the other hand, when I replace getServerSideProps with getStaticProps , it works normally. However, if I use getStaticProps , we sometimes get a too many request’s error during nextjs build.

I would like to know if the behavior in getServerSideProps that sends null values initially on the server and updates it later is correct ?

2

Hello @vrbsm,

Can you share the complete code for GetServerSideProps and MyPageContainer?

Hydration errors in Next.js often occur when there’s a mismatch between the server-rendered content and the client-rendered content. This can happen if the HTML structure or the data fetched during server-side rendering is different from what the client expects.

Here are a few common reasons and solutions for hydration errors in Next.js when using getServerSideProps:

  1. Check for Component State Changes
  2. Data Fetching
  3. Client-Side Routing
  4. Dynamic Components
  5. Conditional Rendering
3

Hello @vrbsm,

Dear @vrbsm,

I am glad to inform you that our team has recently developed a plugin that can assist you in resolving hydration errors. This plugin is specifically designed to debug hydration mismatches in React. Offering a comparison of SSR and client-rendered HTML can streamline the debugging process and help you save time. Our blog contains more information about this plugin, which you can access via the link below.

Hope this helps!