• Reusable code. General functions can be shared between client and server code.

  • Fast initial page load. Server has rendered initial load of Single Page App into HTML and is ready to be rendered by the browser. The browser does not need to execute bundle.js to draw and mount our SPA to the DOM.

  • SEO benefits. Serving pre-rendered HTML allows search engine crawlers to crawl and index our website.

Source Code: Server Rendered vs Client Rendered App.

The following two snippets of source is from the exact Redux app, but the first is written with isomorphic JavaScript and server side rendered. The second, is client side rendered. The source code is found by right clicking the app in Chrome, and clicking “View Page Source”.

<!-- NodeJS compiles and renders our Redux app into a HTML string which we 
send to the client for initial render -->
  
<!doctype html>
  <html>
    <head>
      <title>Redux Single Page App</title>
    </head>
    <body>
      <div id="root"><div data-reactroot="" data-reactid="1" data-react-checksum="487994458"><p data-reactid="2">Current Value: 0</p><button data-reactid="3">+</button><button data-reactid="4">-</button></div></div>
      <script>
        window.__INITIAL_STATE__ = 0
      </script>
      <script src="/static/bundle.js"></script>
    </body>
  </html>
<!-- NodeJS sends an index.html and bundle.js to the web browser. 
The browser renders the Redux app by executing bundle.js then 
mounts the Redux app to <div id="root"></div> -->

<!doctype html>
<html>
  <head>
    <title>Redux Single Page App</title>
  </head>
  <body>
    <div id="root"></div>
    <script src="static/bundle.js"></script>
  </body>
</html>