title: React 18: Hydration failed because the initial UI does not match what was rendered on the server
body: <p>I'm trying to get SSR working in my app but I get the error:</p>
  <blockquote>
  <p>Hydration failed because the initial UI does not match what was
  rendered on the server.</p>
  </blockquote>
  <p>Live demo code is <a href="https://stackblitz.com/edit/react-j94bwy" rel="noreferrer">here</a></p>
  <p>Live demo of problem is <a href="https://react-j94bwy.stackblitz.io/" rel="noreferrer">here</a> (open dev tools console to see the errors):</p>
  <p>// App.js</p>
  <pre><code> import React from &quot;react&quot;;
      
    class App extends React.Component {
  
    head() {
      return (
        &lt;head&gt;
          &lt;meta charSet=&quot;utf-8&quot; /&gt;
          &lt;meta
            name=&quot;viewport&quot;
            content=&quot;width=device-width, initial-scale=1, shrink-to-fit=no&quot;
          /&gt;
          &lt;meta name=&quot;theme-color&quot; content=&quot;#000000&quot; /&gt;
          &lt;title&gt;React App&lt;/title&gt;
        &lt;/head&gt;
      );
    }
  
    body() {
      return (
        &lt;body&gt;
          &lt;div className=&quot;App&quot;&gt;
            &lt;h1&gt;Client says Hello World&lt;/h1&gt;
          &lt;/div&gt;
        &lt;/body&gt;
      );
    }
  
    render() {
      return (
        &lt;React.Fragment&gt;
          {this.head()}
          {this.body()}
        &lt;/React.Fragment&gt;
      )
    }
  }
  export default App;
  </code></pre>
  <p>// index.js</p>
  <pre><code>import React from &quot;react&quot;;
  import * as ReactDOM from &quot;react-dom/client&quot;;
  import { StrictMode } from &quot;react&quot;;
  
  import App from &quot;./App&quot;;
  
  
  // const container = document.getElementById(&quot;root&quot;);
  const container = document.getElementsByTagName(&quot;html&quot;)[0]
  
  ReactDOM.hydrateRoot(
    container,
    &lt;StrictMode&gt;
      &lt;App /&gt;
    &lt;/StrictMode&gt;
  );
  </code></pre>
  <p>The Html template shown in the live demo is served by the backend and generated using the following code:</p>
  <pre><code>const ReactDOMServer = require('react-dom/server');
  
  const clientHtml = ReactDOMServer.renderToString(
  &lt;StrictMode&gt;
      &lt;App /&gt;
  &lt;/StrictMode&gt;
  )
  </code></pre>
  <p>// serve clientHtml to client</p>
  <p>I need to dynamically generate <code>&lt;head&gt;&lt;/head&gt; and &lt;body&gt;&lt;/body&gt;</code> section as shown in the App class</p>