Why does NextJS give this hydration error on dev server build but not production build?

Question

If you use create-next-app and paste this code, you get a hydration error on the client when running the next dev server.

pages/index.js

export async function getServerSideProps(context) {
  const x = Math.random();
  const script = `
<script id="feed">
var d = document.createElement('div');
d.id = "${x}";
var s = document.getElementById('feed')
s.parentNode.insertBefore(d, s)
</script>`;
  return {
    props: { script }, // will be passed to the page component as props
  };
}

export default function Home({ script }) {
  return (
    <div>
      Hello world. Here is my SSR website.
      <div dangerouslySetInnerHTML={{ __html: script }}></div>
    </div>
  );
}

Browser Console:

next-dev.js?3515:25 Warning: Prop `dangerouslySetInnerHTML` did not match. Server: "\n<div id=\"0.2796943840164239\"></div><script id=\"feed\">\nvar d = document.createElement('div');\nd.id = \"0.2796943840164239\";\nvar s = document.getElementById('feed')\ns.parentNode.insertBefore(d, s)\n</script>" Client: "\n<script id=\"feed\">\nvar d = document.createElement('div');\nd.id = \"0.2796943840164239\";\nvar s = document.getElementById('feed')\ns.parentNode.insertBefore(d, s)\n</script>"
    at div
    at div
    at Home (webpack-internal:///./pages/index.js:11:24)
    at MyApp (webpack-internal:///./pages/_app.js:37:27)
    at ErrorBoundary (webpack-internal:///./node_modules/next/dist/compiled/@next/react-dev-overlay/client.js:8:20638)
    at ReactDevOverlay (webpack-internal:///./node_modules/next/dist/compiled/@next/react-dev-overlay/client.js:8:23179)
    at Container (webpack-internal:///./node_modules/next/dist/client/index.js:323:9)
    at AppContainer (webpack-internal:///./node_modules/next/dist/client/index.js:825:26)
    at Root (webpack-internal:///./node_modules/next/dist/client/index.js:949:27) 

See more info here: https://nextjs.org/docs/messages/react-hydration-error

I know that the server is not inserting the div server-side, because the HTML response from a curl localhost:3000 gives me the HTML with no div inserted.

My theory is that the browser parses the script tag from the HTML response, and inserts the div before the app hydrates, leading to a mismatch.

My question is why would this error not happen in a production build? The error doesn't occur when running on a NextJS production server.

Answer 1

using react useState and useEffect hooks. so it's not rendering in the server. you can use this code :

import { useState, useEffect } from 'react';

export default function Home({ script }) {
   const [render, setRender] = useState(false);
   
   useEffect(() => {
      setRender(true);
   }, []);

   return 
 (
<div>
  Hello world. Here is my SSR website.
  <div dangerouslySetInnerHTML={{ __html: script }}></div>
</div>
  );
}

OR

use can use nextjs dynamic import