Does ReactJS render the app twice for server side rendered app? ( DUPLICATE CODE)
<p>In server side rendering, does the structure require us to render the app twice? in server.js file as show below, the app structure is rendered and sent to the client. Although full code has been generated by <strong>Server.js</strong>, <strong>Client.js</strong> does it again by calling render function.</p>

<p>So the final structure of the app, as I understood it is:
SERVER.js (renders HTML , gets initial state and sets it in the <strong>PRELOADED_STATE</strong> variable,renders page using renderFullPage function)
==>
CLIENT.js (renders the App strucutre using the <strong>PRELOADED_STATE</strong> varible</p>

<p>Kindly correct me if I am wrong. If not, can't we just do it once?</p>

<p><strong>Server.js</strong></p>

<pre><code>import path from 'path'
import Express from 'express'
import React from 'react'
import { createStore } from 'redux'
import { Provider } from 'react-redux'
import counterApp from './reducers'
import App from './containers/App'
import { renderToString } from 'react-dom/server'

const app = Express()
const port = 3000

// This is fired every time the server side receives a request
app.use(handleRender)

// We are going to fill these out in the sections to follow
function handleRender(req, res) { /* ... */ }
function renderFullPage(html, preloadedState) { /* ... */ }

app.listen(port)

function handleRender(req, res) {
  // Create a new Redux store instance
  const store = createStore(counterApp)

  // Render the component to a string
  const html = renderToString(
    &lt;Provider store={store}&gt;
      &lt;App /&gt;
    &lt;/Provider&gt;
  )

  // Grab the initial state from our Redux store
  const preloadedState = store.getState()

  // Send the rendered page back to the client
  res.send(renderFullPage(html, preloadedState))
}
function renderFullPage(html, preloadedState) {
  return `
    &lt;!doctype html&gt;
    &lt;html&gt;
      &lt;head&gt;
        &lt;title&gt;Redux Universal Example&lt;/title&gt;
      &lt;/head&gt;
      &lt;body&gt;
        &lt;div id="root"&gt;${html}&lt;/div&gt;
        &lt;script&gt;
          window.__PRELOADED_STATE__ = ${JSON.stringify(preloadedState)}
        &lt;/script&gt;
        &lt;script src="/static/bundle.js"&gt;&lt;/script&gt;
      &lt;/body&gt;
    &lt;/html&gt;
    `
}
</code></pre>

<p><strong>Client.js</strong></p>

<pre><code>import React from 'react'
import { render } from 'react-dom'
import { createStore } from 'redux'
import { Provider } from 'react-redux'
import App from './containers/App'
import counterApp from './reducers'

// Grab the state from a global injected into server-generated HTML
const preloadedState = window.__PRELOADED_STATE__

// Create Redux store with initial state
const store = createStore(counterApp, preloadedState)

render(
  &lt;Provider store={store}&gt;
    &lt;App /&gt;
  &lt;/Provider&gt;,
  document.getElementById('root')
</code></pre>