title: How to hydrate react ssr with styled-components
body: <p>I am building a react ssr. I decided to use styled-components for css to try css-in-js. I got this error on the console:</p>
  
  <pre><code>react-dom.development.js:530 Warning: Prop `className` did not match. Server: "Home__StyledHome-s26o42-0 frotjg" Client: "Home__StyledHome-s26o42-0 kCdWHN"
  </code></pre>
  
  <p>note:i did not use "className" at all.</p>
  
  <p>I clicked on "react-dom.development.js:530" and directed to this line</p>
  
  <pre><code>Function.prototype.apply.call(console.error, console, argsWithFormat);
  </code></pre>
  
  <p>this is server side renderer function where we render the html:</p>
  
  <pre><code>import { ServerStyleSheet, StyleSheetManager } from "styled-components";
  
  export default (req, store, context) =&gt; {
    const sheet = new ServerStyleSheet();
  
    try {
      const content = renderToString(
        &lt;Provider store={store}&gt;
          &lt;StaticRouter location={req.path} context={context}&gt;
            &lt;StyleSheetManager sheet={sheet.instance}&gt;
              &lt;div&gt;{renderRoutes(Routes)}&lt;/div&gt;
            &lt;/StyleSheetManager&gt;
          &lt;/StaticRouter&gt;
        &lt;/Provider&gt;
      );
      const styleTags = sheet.getStyleTags();
      const helmet = Helmet.renderStatic();
      return `
      &lt;html&gt;
      &lt;head&gt;
      ${helmet.title.toString()}
      ${helmet.meta.toString()}
      ${styleTags}
      &lt;/head&gt;
      &lt;body&gt;
      &lt;div  id="root"&gt;${content}&lt;/div&gt;
      &lt;script&gt;window.INITIAL_STATE=${serialize(store.getState())}&lt;/script&gt;
      &lt;script src="bundle.js"&gt; &lt;/script&gt;
      &lt;/body&gt;&lt;/html&gt; `;
    } catch (e) {
      console.log(e);
    } finally {
      sheet.seal();
    }
  };
  </code></pre>
  
  <p>this is the client side hydrate function:</p>
  
  <pre><code>import { ServerStyleSheet } from "styled-components";
  //StyleSheetManager: documentation says do not use in the client side.
  const sheet = new ServerStyleSheet();
  ReactDOM.hydrate(
      &lt;Provider store={store}&gt;
        &lt;BrowserRouter&gt;
          &lt;div&gt;{renderRoutes(Routes)}&lt;/div&gt;
        &lt;/BrowserRouter&gt;
      &lt;/Provider&gt;,
      document.getElementById("root")
  );
  </code></pre>
  
  <p>since this did not work I implemented this but it did not work neither:
  server-side:</p>
  
  <pre><code>export default (req, store, context) =&gt; {
    const sheet = new ServerStyleSheet();
  
    try {
      const content = renderToString(
        sheet.collectStyles(
          &lt;Provider store={store}&gt;
            &lt;StaticRouter location={req.path} context={context}&gt;
              &lt;div&gt;{renderRoutes(Routes)}&lt;/div&gt;
            &lt;/StaticRouter&gt;
          &lt;/Provider&gt;
        )
      );
      const styleTags = sheet.getStyleTags();
      const helmet = Helmet.renderStatic();
      return `
      &lt;html&gt; 
      &lt;head&gt;
      ${helmet.title.toString()}
      ${helmet.meta.toString()}
      ${styleTags}
      &lt;/head&gt;
      &lt;body&gt;
      &lt;div  id="root"&gt;${content}&lt;/div&gt;
      &lt;script&gt;window.INITIAL_STATE=${serialize(store.getState())}&lt;/script&gt;
      &lt;script src="bundle.js"&gt; &lt;/script&gt;
      &lt;/body&gt;&lt;/html&gt; `;
    } catch (e) {
      console.log("style-component server-site", e);
    } finally {
      sheet.seal();
    }
  };
  </code></pre>
  
  <p>client-side:</p>
  
  <pre><code>const sheet = new ServerStyleSheet();
  ReactDOM.hydrate(
    sheet.collectStyles(
      &lt;Provider store={store}&gt;
        &lt;BrowserRouter&gt;
          &lt;div&gt;{renderRoutes(Routes)}&lt;/div&gt;
        &lt;/BrowserRouter&gt;
      &lt;/Provider&gt;,
      document.getElementById("root")
    )
  );
  </code></pre>
  
  <p>documentation of styled-components with react-ssr is very short. I implement the way how API is supposed to be but still got this error. this topic is a little confusing, I hope someone can help.</p>