title: React checksum invalid server rendering
body: <p>In my react app I am currently using server side rendering. The error I am currently getting is : </p>
  
  <pre><code>Warning: React attempted to reuse markup in a container but the checksum was invalid. This generally means that you are using server rendering and the markup generated on the server was not what the client was expecting. React injected new markup to compensate which works but you have lost many of the benefits of server rendering. Instead, figure out why the markup being generated is different on the client or server:
   (client) &lt;noscript data-reacti
   (server) &lt;div data-reactid=".1
  </code></pre>
  
  <p>Server.js : </p>
  
  <pre><code> import 'babel-polyfill';
   import path from 'path';
   import express from 'express';
   import React from 'react';
   import ReactDOM from 'react-dom/server';
   import { match, RouterContext } from 'react-router';
   import assets from './assets';
   import { port } from './config';
   import routes from './routes';
   import ContextHolder from './core/ContextHolder';
   import Html from './components/Html';
  
   const server = global.server = express();
  
   //
   // Register Node.js middleware
   // -----------------------------------------------------------------------------
   server.use(express.static(path.join(__dirname, 'public')));
  
   //
   // Register API middleware
   // -----------------------------------------------------------------------------
   server.use('/api/content', require('./api/content').default);
  
   //
   // Register server-side rendering middleware
   // -----------------------------------------------------------------------------
   server.get('*', async (req, res, next) =&gt; {
     try {
       match({ routes, location: req.url }, (error, redirectLocation, renderProps) =&gt; {
         if (error) {
           throw error;
         }
         if (redirectLocation) {
           const redirectPath = `${ redirectLocation.pathname }${ redirectLocation.search }`;
           res.redirect(302, redirectPath);
           return;
         }
         let statusCode = 200;
         const data = { title: '', description: '', css: '', body: '', entry: assets.main.js };
         const css = [];
         const context = {
           insertCss: styles =&gt; css.push(styles._getCss()),
           onSetTitle: value =&gt; data.title = value,
           onSetMeta: (key, value) =&gt; data[key] = value,
           onPageNotFound: () =&gt; statusCode = 404,
         };
         data.body = ReactDOM.renderToString(
           &lt;ContextHolder context={context}&gt;
             &lt;RouterContext {...renderProps}/&gt;
           &lt;/ContextHolder&gt;
         );
         data.css = css.join('');
         const html = ReactDOM.renderToStaticMarkup(&lt;Html {...data} /&gt;);
         res.status(statusCode).send(`&lt;!doctype html&gt;\n${html}`);
       });
     } catch (err) {
       next(err);
     }
   });
  
   //
   // Launch the server
   // -----------------------------------------------------------------------------
   server.listen(port, () =&gt; {
     /* eslint-disable no-console */
     console.log(`The server is running at http://localhost:${port}/`);
   });
  </code></pre>
  
  <p>client.js : </p>
  
  <pre><code>import 'babel-polyfill';
  import React from 'react';
  import { match, Router } from 'react-router';
  import { render } from 'react-dom';
  import FastClick from 'fastclick';
  import routes from './routes';
  import Location from './core/Location';
  import ContextHolder from './core/ContextHolder';
  import { addEventListener, removeEventListener } from './core/DOMUtils';
  
  let cssContainer = document.getElementById('css');
  const appContainer = document.getElementById('app');
  const context = {
    insertCss: styles =&gt; styles._insertCss(),
    onSetTitle: value =&gt; document.title = value,
    onSetMeta: (name, content) =&gt; {
      // Remove and create a new &lt;meta /&gt; tag in order to make it work
      // with bookmarks in Safari
      const elements = document.getElementsByTagName('meta');
      [].slice.call(elements).forEach((element) =&gt; {
        if (element.getAttribute('name') === name) {
          element.parentNode.removeChild(element);
        }
      });
      const meta = document.createElement('meta');
      meta.setAttribute('name', name);
      meta.setAttribute('content', content);
      document.getElementsByTagName('head')[0].appendChild(meta);
    },
  };
  
  function run() {
    const scrollOffsets = new Map();
    let currentScrollOffset = null;
  
    // Make taps on links and buttons work fast on mobiles
    FastClick.attach(document.body);
  
    const unlisten = Location.listen(location =&gt; {
      const locationId = location.pathname + location.search;
      if (!scrollOffsets.get(locationId)) {
        scrollOffsets.set(locationId, Object.create(null));
      }
      currentScrollOffset = scrollOffsets.get(locationId);
      // Restore the scroll position if it was saved
      if (currentScrollOffset.scrollY !== undefined) {
        window.scrollTo(currentScrollOffset.scrollX, currentScrollOffset.scrollY);
      } else {
        window.scrollTo(0, 0);
      }
    });
  
    const { pathname, search, hash } = window.location;
    const location = `${pathname}${search}${hash}`;
  
    match({ routes, location }, (error, redirectLocation, renderProps) =&gt; {
      render(
        &lt;ContextHolder context={context}&gt;
          &lt;Router {...renderProps} children={routes} history={Location} /&gt;
        &lt;/ContextHolder&gt;,
        appContainer
      );
      // Remove the pre-rendered CSS because it's no longer used
      // after the React app is launched
      if (cssContainer) {
        cssContainer.parentNode.removeChild(cssContainer);
        cssContainer = null;
      }
    });
  
    // Save the page scroll position
    const supportPageOffset = window.pageXOffset !== undefined;
    const isCSS1Compat = ((document.compatMode || '') === 'CSS1Compat');
    const setPageOffset = () =&gt; {
      if (supportPageOffset) {
        currentScrollOffset.scrollX = window.pageXOffset;
        currentScrollOffset.scrollY = window.pageYOffset;
      } else {
        currentScrollOffset.scrollX = isCSS1Compat ?
          document.documentElement.scrollLeft : document.body.scrollLeft;
        currentScrollOffset.scrollY = isCSS1Compat ?
          document.documentElement.scrollTop : document.body.scrollTop;
      }
    };
  
    addEventListener(window, 'scroll', setPageOffset);
    addEventListener(window, 'pagehide', () =&gt; {
      removeEventListener(window, 'scroll', setPageOffset);
      unlisten();
    });
  }
  
  // Run the application when both DOM is ready and page content is loaded
  if (['complete', 'loaded', 'interactive'].includes(document.readyState) &amp;&amp; document.body) {
    run();
  } else {
    document.addEventListener('DOMContentLoaded', run, false);
  }
  </code></pre>
  
  <p>This is the first time I have explored server side rendering. I know this means the server and client are rending 2 different things so the Client has to re-render anything. It's not breaking anything but I would like to know how to fix this so the warning can go away.</p>