Server-side rendering

Server-side rendering is a great way to increase the perception of loading speed in full-stack apps. Users get a complete page with visible content when they load your site, as opposed to an empty page that doesn't get populated until JavaScript runs.

Say we have an app built with components. If we use our browser development tool to view our page DOMafterthe page has loaded, we will see our fully rendered app:

<p id="app">
  <ul>
    <li>Component 1</li>
    <li>Component 2</li>
    <li>
      <p>Component 3</p>
    </li>
  </ul>
</p>

But if we view the source of the document, that is, index.html,as it was when sent by the server, you'll see it just has our mount element:

<p id="app"></p>

Why? Because JavaScript is responsible for building our page and, ipso facto, JavaScript has to run before the page is built. But with server-side rendering, our index file includes the HTML needed for the browser to build a DOM before JavaScript is downloaded and run. The app does not load any faster, but content is shown sooner.