# Hydration Error - SSR

**URL:** <https://forum.builder.io/t/hydration-error-ssr/5259>\
**Category:** Technical Questions\
**Tags:** nextjs\
**Created:** [April 1, 2024, 6:35am UTC](https://forum.builder.io/t/hydration-error-ssr/5259 "2024-04-01T06:35:13Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![sohail](https://avatars.discourse-cdn.com/v4/letter/s/6de8d8/32.png) [@sohail](https://forum.builder.io/u/sohail)\
**Post date:** [April 1, 2024, 6:35am UTC](https://forum.builder.io/t/hydration-error-ssr/5259/1 "2024-04-01T06:35:13Z")

</div>

_Please fill out as many of the following questions as possible so we can help you promptly! If you don’t know how to answer or it does not apply, feel free to remove it or leave it blank._

**Builder content link**

> **[Builder.io: Visual Development Platform](https://builder.io/content/de5d166989ab4c46a5712d55d855a758)**
>
> Drag and drop with your components, right within your existing site or app. Build and optimize digital experiences for any tech stack, visually..

**What are you trying to accomplish**  
I wish to integrate [builder.io](http://builder.io) and register my custom components and pages in SSR in nextJS App router.

**Screenshots or video link**

 ![Screenshot 2024-04-01 at 12.02.06 PM](https://us1.discourse-cdn.com/flex020/uploads/builder/original/2X/a/a7419f44284f0df09ee9736c948e80dfd10642d0.jpeg)  
 ![Screenshot 2024-04-01 at 12.02.14 PM](https://us1.discourse-cdn.com/flex020/uploads/builder/original/2X/3/3690473e65d5bc648f14df92441fb8e5abe1e53f.jpeg)

**Code stack you are integrating Builder with**  
NextJS APP router

I wish to resolve this hydration error and avoid client-side render of the builder pages. How do I do it? I went through the documentation but could not find anything which helps me achieve the server side rendering and also avoid this hydration error.

```auto
import { builder } from "@builder.io/sdk";
import { RenderBuilderContent } from "@/components/builder";

builder.init(process.env.NEXT_PUBLIC_BUILDER_API_KEY ?? "");

type PageProps = {
  params: {
    page: string[];
  };
};

export default async function Page(props: Readonly<PageProps>) {
  // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
  const content = await builder
    .get("page", {
      userAttributes: {
        // Use the page path specified in the URL to fetch the content
        urlPath: "/" + (props?.params?.page?.join("/") || ""),
      },
      // Set prerender to false to return JSON instead of HTML
      prerender: false,
    })
    // Convert the result to a promise
    .toPromise();

  return (
    <div className="mt-20 justify-center w-full">
      {/* Render the Builder page */}
      {/* eslint-disable-next-line @typescript-eslint/no-unsafe-assignment */}
      <RenderBuilderContent content={content} />
    </div>
  );
}

```

```auto
{
  "name": "podium-entertainment",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "dev:ssl": "next dev --experimental-https",
    "build": "next build",
    "start": "next start",
    "test": "jest --watchAll=false",
    "test:watch": "jest --watchAll",
    "test:coverage": "jest --coverage",
    "lint": "next lint",
    "check-types": "tsc --pretty --noEmit",
    "prepare": "husky install",
    "cypress:open": "cypress open"
  },
  "dependencies": {
    "@builder.io/dev-tools": "^1.0.1",
    "@builder.io/react": "^3.2.6",
    "@builder.io/sdk": "^2.2.2",
    "@prisma/client": "^5.8.0",
    "@radix-ui/react-popover": "^1.0.7",
    "clsx": "^2.1.0",
    "next": "14.0.4",
    "next-auth": "^4.24.5",
    "react": "^18",
    "react-dom": "^18",
    "tailwind-merge": "^2.2.1"
  },
  "devDependencies": {
    "@next/eslint-plugin-next": "^14.0.4",
    "@testing-library/jest-dom": "^6.2.1",
    "@testing-library/react": "^14.1.2",
    "@types/jest": "^29.5.11",
    "@types/node": "^20",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "@typescript-eslint/eslint-plugin": "^6.17.0",
    "@typescript-eslint/parser": "^6.17.0",
    "autoprefixer": "^10.0.1",
    "cypress": "^13.6.3",
    "eslint": "^8",
    "eslint-config-next": "14.0.4",
    "eslint-config-prettier": "^9.1.0",
    "eslint-plugin-cypress": "^2.15.1",
    "eslint-plugin-jest": "^27.6.3",
    "eslint-plugin-jest-dom": "^5.1.0",
    "eslint-plugin-prettier": "^5.1.2",
    "eslint-plugin-testing-library": "^6.2.0",
    "husky": "^8.0.0",
    "jest": "^29.7.0",
    "jest-canvas-mock": "^2.5.2",
    "jest-environment-jsdom": "^29.7.0",
    "lint-staged": "^15.2.0",
    "postcss": "^8",
    "prettier": "^3.1.1",
    "prisma": "^5.7.1",
    "tailwindcss": "^3.3.0",
    "ts-jest": "^29.1.2",
    "ts-node": "^10.9.2",
    "typescript": "^5"
  }
}

```

And I am still facing issue of empty state object in [builder.io](http://builder.io) I wanted to bind my data but I am unable to.

Please help me resolve this. @manish-sharma

---

<div class="post-metadata">

**Author:** ![manish-sharma](https://avatars.discourse-cdn.com/v4/letter/m/8797f3/32.png) [@manish-sharma](https://forum.builder.io/u/manish-sharma)\
**Post date:** [April 1, 2024, 10:30am UTC](https://forum.builder.io/t/hydration-error-ssr/5259/2 "2024-04-01T10:30:19Z")

</div>

Hello @sohail,

For resolving hydration errors, we recommend you try our plugin [Hydration Overlay](https://github.com/BuilderIO/hydration-overlay)

> **[Announcing React Hydration Overlay - Easily Squash Hydration Errors](https://www.builder.io/blog/announcing-react-hydration-overlay)**
>
> @builder.io/react-hydration-overlay is an npm package that provides you with a more useful error message when React SSR hydration mismatch occurs.

---

<div class="post-metadata">

**Author:** ![sohail](https://avatars.discourse-cdn.com/v4/letter/s/6de8d8/32.png) [@sohail](https://forum.builder.io/u/sohail)\
**Post date:** [April 1, 2024, 11:37am UTC](https://forum.builder.io/t/hydration-error-ssr/5259/3 "2024-04-01T11:37:29Z")

</div>

hi @manish-sharma  
I tried this but I am unable to find the issue.

```auto
const withBuilderDevTools = require("@builder.io/dev-tools/next")();

const {
  withHydrationOverlay,
} = require("@builder.io/react-hydration-overlay/next");

/** @type {import("next").NextConfig} */
const nextConfig = withBuilderDevTools({
  reactStrictMode: true,
  images: {
    remotePatterns: [
      {
        protocol: "https",
        hostname: "podiumaudio.com",
        port: "",
        pathname: "/wp-content/uploads/**",
      },
      {
        protocol: "https",
        hostname: "m.media-amazon.com",
        port: "",
        pathname: "/images/**",
      },
      {
        protocol: "https",
        hostname: "podiumpublishing.box.com",
        port: "",
        pathname: "/shared/static/**",
      },
      {
        protocol: "https",
        hostname: "cdn.builder.io",
      },
      {
        protocol: "https",
        hostname: "s3-alpha-sig.figma.com",
      },
      {
        protocol: "https",
        hostname: "www.figma.com",
      },
      {
        protocol: "https",
        hostname: "image.tmdb.org",
      },
    ],
  },
});

module.exports = withHydrationOverlay({
  /**
   * Optional: `appRootSelector` is the selector for the root element of your app. By default, it is `#__next` which works
   * for Next.js apps with pages directory. If you are using the app directory, you should change this to `main`.
   */
  appRootSelector: "main",
})(nextConfig);

module.exports = nextConfig;

```

```auto
import "./globals.css";
import { ReactNode } from "react";
import type { Metadata } from "next";
import Header from "@/components/header/header";
import SignUp from "@/components/sign-up/sign-up";
import Footer from "@/components/footer/footer";
import { gintoNord, openSans } from "./fonts";
import { HydrationOverlay } from "@builder.io/react-hydration-overlay";

export const metadata: Metadata = {
  title: "Podium Entertainment",
  description: "Home Page for Podium Entertainment",
  icons: {
    icon: [
      {
        media: "(prefers-color-scheme: light)",
        url: "/images/icon-dark.png",
        href: "/images/icon-dark.png",
      },
      {
        media: "(prefers-color-scheme: dark)",
        url: "/images/icon.png",
        href: "/images/icon-light.png",
      },
    ],
  },
};
const RootLayout = ({ children }: { children: ReactNode }) => {
  return (
    <html lang="en" className={`${openSans.variable}`}>
      <body className={gintoNord.className}>
        <Header />
        <HydrationOverlay>{children}</HydrationOverlay>
        <SignUp />
        <Footer />
      </body>
    </html>
  );
};

export default RootLayout;

```

```auto
import { builder } from "@builder.io/sdk";
import { RenderBuilderContent } from "@/components/builder";

builder.init(process.env.NEXT_PUBLIC_BUILDER_API_KEY ?? "");

type PageProps = {
  params: {
    page: string[];
  };
};

export default async function Page(props: Readonly<PageProps>) {
  // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
  const content = await builder
    .get("page", {
      userAttributes: {
        // Use the page path specified in the URL to fetch the content
        urlPath: "/" + (props?.params?.page?.join("/") || ""),
      },
      // Set prerender to false to return JSON instead of HTML
      prerender: false,
    })
    // Convert the result to a promise
    .toPromise();

  return (
    <div className="mt-20 justify-center w-full">
      {/* Render the Builder page */}
      {/* eslint-disable-next-line @typescript-eslint/no-unsafe-assignment */}
      <RenderBuilderContent content={content} />
    </div>
  );
}

```

> **[Builder.io: Visual Development Platform](https://builder.io/content/5c027df0de7341b4b9a8c9706b8a3e95)**
>
> Drag and drop with your components, right within your existing site or app. Build and optimize digital experiences for any tech stack, visually..

 ![Screenshot 2024-04-01 at 5.07.07 PM](https://us1.discourse-cdn.com/flex020/uploads/builder/original/2X/0/018f068db2eddf578bcba763b09623aa01e8a07b.jpeg)

This is happening only on the builder pages.  
I even tried wrapping the content inside body as whole and also only children inside Overlay but nothing seems to be working.

---

<div class="post-metadata">

**Author:** ![manish-sharma](https://avatars.discourse-cdn.com/v4/letter/m/8797f3/32.png) [@manish-sharma](https://forum.builder.io/u/manish-sharma)\
**Post date:** [April 1, 2024, 11:50am UTC](https://forum.builder.io/t/hydration-error-ssr/5259/4 "2024-04-01T11:50:59Z")

</div>

Hello @sohail,

Could you please confirm if you encounter the hydration error even for newly created Builder content without any custom content, or does the error only occur when using custom components?

---

<div class="post-metadata">

**Author:** ![sohail](https://avatars.discourse-cdn.com/v4/letter/s/6de8d8/32.png) [@sohail](https://forum.builder.io/u/sohail)\
**Post date:** [April 1, 2024, 11:58am UTC](https://forum.builder.io/t/hydration-error-ssr/5259/5 "2024-04-01T11:58:31Z")

</div>

![Screenshot 2024-04-01 at 5.26.58 PM](https://us1.discourse-cdn.com/flex020/uploads/builder/original/2X/d/da225243ff6bcdd8b2cf4cb1da9b0a180b5d75c1.jpeg)

I just created this page and added a simple text from builder’s basic UI elements (Not custom components) and this took a lot of time to appear on the live page and multiple refreshes. and when it loaded I got this issue.

> **[Builder.io: Visual Development Platform](https://builder.io/content/c270ce777f2d4a6da9e5f5bf06478de0/edit?activeDesignerTab=0&selectedBlock=builder-5d5656b8c29c48658353e28ab064afcb)**
>
> Drag and drop with your components, right within your existing site or app. Build and optimize digital experiences for any tech stack, visually..

---

<div class="post-metadata">

**Author:** ![manish-sharma](https://avatars.discourse-cdn.com/v4/letter/m/8797f3/32.png) [@manish-sharma](https://forum.builder.io/u/manish-sharma)\
**Post date:** [April 1, 2024, 12:13pm UTC](https://forum.builder.io/t/hydration-error-ssr/5259/6 "2024-04-01T12:13:05Z")

</div>

Hello @sohail,

Unfortunately, it’s challenging for us to investigate the hydration issue since you’re developing locally, and we’re unable to reproduce the error using our own setup to preview your content. Would you be able to provide a minimum reproducible repository (repo) of your project where we can reproduce the issue you’re experiencing?

Sharing a repo will enable us to closely examine your setup and identify the root cause of the hydration problem more effectively.

Thanks,

---

<div class="post-metadata">

**Author:** ![justinradomski](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.builder.io/justinradomski/32/2940_2.png) [@justinradomski](https://forum.builder.io/u/justinradomski)\
**Post date:** [May 10, 2024, 10:00pm UTC](https://forum.builder.io/t/hydration-error-ssr/5259/7 "2024-05-10T22:00:11Z")

</div>

I’m having the same issue here with the same elements called out in the hydration error. When I use the hydration overlay, essentially the entire page is the hydration error. I’ve compared this project to other Builder projects of mine and I just can’t determine what’s going on.

 ![image](https://us1.discourse-cdn.com/flex020/uploads/builder/original/2X/b/bdebf2356410b8d3f0377557677a7dca601474d1.png)

The Builder content takes a second to appear on page load, whereas other projects don’t seem to experience the same problem in local development.

Would love to know if there’s something obvious I’m missing here.

---

<div class="post-metadata">

**Author:** ![justinradomski](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.builder.io/justinradomski/32/2940_2.png) [@justinradomski](https://forum.builder.io/u/justinradomski)\
**Post date:** [May 14, 2024, 9:24pm UTC](https://forum.builder.io/t/hydration-error-ssr/5259/8 "2024-05-14T21:24:09Z")

</div>

For anyone that ends up here with the same issue, I can’t explain it, but make sure that your RenderBuilderContent component passes the props “model” instead of “modelType”

Wrong:

```auto
<RenderBuilderContent content={content} modelType="page" />

```

Right:

```auto
<RenderBuilderContent content={content} model="page" />

```

---

<div class="post-metadata">

**Author:** ![brdev](https://avatars.discourse-cdn.com/v4/letter/b/e274bd/32.png) [@brdev](https://forum.builder.io/u/brdev)\
**Post date:** [November 18, 2024, 2:15am UTC](https://forum.builder.io/t/hydration-error-ssr/5259/9 "2024-11-18T02:15:51Z")

</div>

I’m running into the same thing myself. Data that I fetch from Builder’s Content API and pass into my custom component via that data prop throws a hydration error.

If I use a built in Builder component like, “Text” I don’t get the hydration error. Why would this be happening? I’m using Next.js 14 App Router.