# Hydration error：opening previewURL for localhost:3000

**URL:** <https://forum.builder.io/t/hydration-error-opening-previewurl-for-localhost-3000/5471>\
**Category:** General\
**Tags:** react, nextjs\
**Created:** [May 1, 2024, 3:27am UTC](https://forum.builder.io/t/hydration-error-opening-previewurl-for-localhost-3000/5471 "2024-05-01T03:27:54Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![RadisLuo](https://avatars.discourse-cdn.com/v4/letter/r/2bfe46/32.png) [@RadisLuo](https://forum.builder.io/u/RadisLuo)\
**Post date:** [May 1, 2024, 3:27am UTC](https://forum.builder.io/t/hydration-error-opening-previewurl-for-localhost-3000/5471/1 "2024-05-01T03:27:54Z")

</div>

next:14.2.3  
sdk-react:1.0.26

next-page router(getServerSideProps)

```auto
fetchOneEntry({
      model: 'page',
      apiKey,
      locale: lang,
      userAttributes: { urlPath, version: Date.now() },
})

export default function App(props: Readonly<Props>) {
  const { page } = props
  const shouldRenderBuilderContent = page || isPreviewing() || isEditing()

  return shouldRenderBuilderContent ? (
    <Content customComponents={CUSTOM_COMPONENTS} content={page} model="page" apiKey={apiKey} />
  ) : (
    <DefaultErrorPage statusCode={404} />
  )
}

```

When accessing `localhost:3000` through the PreviewURL, encountering a hydration error that doesn’t occur when the site is accessed normally. The issue is likely due to parameters in the URL that may be causing `<script>` or `<style>` to be nested within `<div>` elements during rendering. How can this be resolved?

---

<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:** [May 9, 2024, 12:01pm UTC](https://forum.builder.io/t/hydration-error-opening-previewurl-for-localhost-3000/5471/2 "2024-05-09T12:01:50Z")

</div>

Hello @RadisLuo ,

For resolving hydration-related issues, we recommend you check out the below blog and plugin

> **[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.

Hope this helps!