{"id":147,"hash":"e58f124e9841588e340bd2047b77af3206aecaf26bfc99cc23afc2c4ae944356","pattern":"React 18: Hydration failed because the initial UI does not match what was rendered on the server","full_message":"I'm trying to get SSR working in my app, but I get the error:\n\nHydration failed because the initial UI does not match what was\nrendered on the server.\n\nLive demo code is here.\n\nLive demo of problem is here (open dev tools console to see the errors):\n\nFile App.js\n import React from \"react\";\n\n class App extends React.Component {\n\n head() {\n return (\n \n \n \n \n React App\n \n );\n }\n\n body() {\n return (\n \n
\n

Client says Hello World

\n
\n \n );\n }\n\n render() {\n return (\n \n {this.head()}\n {this.body()}\n \n )\n }\n}\nexport default App;\n\nFile index.js\nimport React from \"react\";\nimport * as ReactDOM from \"react-dom/client\";\nimport { StrictMode } from \"react\";\n\nimport App from \"./App\";\n\n//const container = document.getElementById(\"root\");\nconst container = document.getElementsByTagName(\"html\")[0]\n\nReactDOM.hydrateRoot(\n container,\n \n \n \n);\n\nThe HTML template shown in the live demo is served by the backend and generated using the following code:\n\nconst ReactDOMServer = require('react-dom/server');\n\nconst clientHtml = ReactDOMServer.renderToString(\n\n \n\n)\n\n// Serve clientHtml to client\n\nI need to dynamically generate and section as shown in the App class.","ecosystem":"npm","package_name":"reactjs","package_version":null,"solution":"I have been experiencing the same problem lately with Next.js. \n\nI am not sure if my observations apply to other libraries.\n\nI had been wrapping my components with an improper tag; that is, Next.js is not comfortable having a p tag wrapping divs, sections, etc., so it will yell Hydration failed because the initial UI does not match what was rendered on the server.\n\nI solved this problem by examining how my elements were wrapping each other. With Material UI, you would need to be cautious. For example, if you use a typography component as a wrapper, the default value of the component prop is

, so you will experience the error if you don’t change the component value to something semantic.\n\nBased on my personal experience, the problem is caused by the improper arrangement of HTML elements. To solve the problem in the context of Next.js, one needs to reevaluate how HTML elements are arranged.\n\nimport Image from 'next/image'\n/**\n * This might give that error\n */\nexport const IncorrectComponent = ()=>{\n return(\n

\n

This is not correct and should never be done\n because the p tag has been abused
\n \n

\n )\n}\n\n/**\n * This will work\n */\nexport const CorrectComponent = ()=>{\n return(\n
\n
This is correct and should work because a div is\n really good for this task.
\n \n
\n )\n}","confidence":0.95,"source":"stackoverflow","source_url":"https://stackoverflow.com/questions/71706064/react-18-hydration-failed-because-the-initial-ui-does-not-match-what-was-render","votes":342,"created_at":"2026-04-19T04:41:25.068142+00:00","updated_at":"2026-04-19T04:51:06.834981+00:00"}