title: Expected server HTML to contain a matching <div> in Server side rendering
body: <p>I am new in server side rendering. I am trying to implement it like following but, it shows error.</p>
  
  <p><strong>index.html</strong></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;meta http-equiv="Content-type" content="text/html; charset=utf-8"/&gt;
      &lt;title&gt;&lt;%= htmlWebpackPlugin.options.title %&gt;&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div id="root"&gt;&lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>index.js</strong></p>
  
  <pre><code>import React from 'react';
  import ReactDOM from 'react-dom'
  import { createStore, applyMiddleware, compose } from 'redux';
  import thunk from 'redux-thunk'
  import { Provider } from 'react-redux'
  import rootReducer from './reducers'
  import './index.css'
  import Main from './Main'
  
  const preloadedState = window.__PRELOADED_STATE__
  
  delete window.__PRELOADED_STATE__
  
  const store = createStore(
      rootReducer, 
      preloadedState,
      applyMiddleware(thunk)
    );
  
  ReactDOM.hydrate( 
      &lt;Provider store={store}&gt;
          &lt;Main /&gt;
      &lt;/Provider&gt;,
      document.getElementById('root')
  );
  </code></pre>
  
  <p>server.js</p>
  
  <pre><code>import express from 'express';
  import open from 'open';
  import rootReducer from '../src/reducers'
  import Main from '../src/Main';
  import { createStore } from 'redux';
  import { Provider } from 'react-redux';
  import { renderToString } from 'react-dom/server'
  
  var app = express();
  const port = 4000;
  
  app.use(express.static('dist'));
  
  app.get('/', (req, res) =&gt; {
      const store = createStore(rootReducer)
  
      const html = renderToString(
          &lt;Provider store={store}&gt;
            &lt;Main /&gt;
          &lt;/Provider&gt;
      )
  
      const preloadedState = store.getState();
      res.send(renderFullPage(html, preloadedState))
  });
  
  function renderFullPage(html, preloadedState) {
      return `
      &lt;!doctype html&gt;
      &lt;html&gt;
        &lt;body&gt;
          &lt;div id="root"&gt;${html}&lt;/div&gt;
          &lt;script&gt;
            window.__PRELOADED_STATE__ = ${JSON.stringify(preloadedState).replace(/&lt;/g,'\\u003c')}
          &lt;/script&gt;
        &lt;/body&gt;
      &lt;/html&gt;
      `
  }
  
  app.listen(port, function (err) {
    if (err) {
          console.log(err);
      } else {
          open('http://localhost:' + port);
      }
  })
  </code></pre>
  
  <p>When i try to run SSR it shows following error. I don't understand what i am doing wrong?</p>
  
  <blockquote>
    <p><strong><code>Warning: Expected server HTML to contain a matching &lt;div&gt; in &lt;div&gt;.</code></strong></p>
  </blockquote>
  
  <p>Any help would be greatly appreciated.</p>
  
  <p><strong>Edit:</strong></p>
  
  <pre><code>import React, { Component } from 'react';
  import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'; 
  import Content from './components/Content';
  import PageNotFound from './components/PageNotFound'
  import Movie from './components/Movie';
  
  class Main extends Component {
  
      render() {   
          return ( 
              &lt;div className="main"&gt;
                  &lt;Router&gt;
                      &lt;Switch&gt;
                          &lt;Route exact path='/' component={Content} /&gt; 
                          &lt;Route path='/search/:query' component={Content} /&gt;
                          &lt;Route path='/film/:id' component={Movie} /&gt; 
                          &lt;Route path='*' component={PageNotFound} /&gt;
                      &lt;/Switch&gt;  
                  &lt;/Router&gt;      
              &lt;/div&gt;
          );
      }
  }
  
  export default Main;
  </code></pre>
  
  <p>This is not duplicate of given link as i am using SSR. Then why should i use render instead of hydrate as i am using SSR?</p>