Isormophic javascript, request processing

Question

I was wondering why isomorphic JS, like using reactjs in both client and server side increase first page load ?

What is different from simple SPA applications ?

In both cases we are loading the full content of the applications (in build.js or bundle.js for example). So what is different in both cases ?

Answer 1

When using JS isomorphically, the same code can be used to pre-render the page that is sent to the client as would be used to render in the case of a 'simple SPA'. This means that minimal post-processing needs to happen client-side (at least for display purposes), resulting in a faster-appearing page load.

Conversely, in the case of a 'simple SPA' the client-side rendering infrastructure may need to make subsequent requests to the back end in order to retrieve data that is then used for rendering, resulting in a slower-looking page load, as extra details will 'pop-in' after the inital load.

The "Trouble in paradise > Performance" from this article gives a good description of why a client-side only SPA can appear slower, and it's implications.

Answer 2

That shouldn't be the case, or rather, one of the main motivations for writing isomorphic JavaScript applications is to improve initial page loads (reuse being another important factor).

Previously, the user would receive a static HTML document which was only an initial, minimally required representation of the full document, requiring the client to perform additional network I/O for completeness.

With an isomorphic architecture, the user immediately receives the full document without the need for any subsequent requests.