Isomorphic Javascript (or Universal Javascript) explained

Building High Performance Web sites

Modern Web applications are built using Javascript MVC libraries (React, Angular etc). They typically consume APIs direct from the server in the browser, and then render the HTML. This means when the user interacts the browser it is updated very quickly, offering a very responsive user experience.

However the initial page load has to download the page, load the Javascript, make AJAX calls and then render the web page. This results in a pause before the user can interact with the site.

For a lot of sites this doesn’t matter, but for sites where the user’s first impression is critical, this pause can put off a lot of users. For example e-commerce or a news site.

With an Isomorphic site, Javascript MVC libraries are used, but rendered on the server so that the initial load is quick, and the user can interact with the site straight away.

The same javascript components are used in the browser to refresh the site after user interaction, the site still has a very responsive user experience.

Advantages

Performance

  • Isomorphic Web pages are pre-rendered in HTML for fast load times. Rendering is not interrupted by AJAX calls typical in Single Page Apps.
  • It is simpler to cache plain html pages from a CDN to handle spikes in load.

Search Engine Optimization (SEO):

  • Pages are easier to crawl by search engines.
  • Faster page load results in better page ranking

Architecture

Isomorphic Architecture

The browser can quickly display pre-rendered HTML

Initial page load will uses the generated HTML, subsequent refreshes caused by user interactions are rendered using the Javascript Components

The same JavaScript components are used on server and client. ReactJS with NodeJS is a common isomorphic library.

CDN such as Akamai or Fastly to provide caching of the pre-rendered HTML to handle spikes in load.

The load balancer divides load between multiple application servers. AJAX calls can go direct to the App Server layer.

Middle layer performs transformations and aggregates on the data. A Back end for front end. Renders HTML from resulting JSON data

Application Server makes REST calls to Microservices API for transactional and reference business data. Commonly a CaaS enabled CMS is used to host layout, static and authored content.

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.