ⓘ Isomorphic JavaScript works in the context of a single-page application SPA. In a typical SPA, most of the application logic, including routing, is encapsulated ..

                                     

ⓘ Isomorphic JavaScript

Isomorphic JavaScript works in the context of a single-page application SPA. In a typical SPA, most of the application logic, including routing, is encapsulated in a bundled JavaScript file that is sent to the client. Whilst this frees up the server, as it does not have to handle so many requests, it also makes the initial load slow for the client, as the entire application needs to be sent over to the client.

With Isomorphic JavaScript, when a client web page is first requested from the server, the view of the page is generated on the server, similar to server-side dynamic web pages, and sent over to the client. The client can then render the view immediately. After the initial view is rendered, the complete SPA is downloaded in the background, and subsequent actions are handled client-side.

                                     

1. Name

The naming of the term Isomorphic JavaScript has been a matter of controversy. The term isomorphic was first coined by Charlie Robbins from Nodejitsu, in one of the companys blog posts. Spike Brehm, a software engineer from Airbnb, wrote another blog post using the same term. However, others have proposed to use the term Universal JavaScript instead.

                                     

2. Benefits

  • Better user experience: By rendering important parts of the application with the real data on the server-side, an isomorphic application can show a meaningful initial page. On the other hand, client rendering application can’t show any meaningful information until it fetches all external data it needs. In the meantime, the only thing a user will see is a loading indicator.
  • More predictable SEO and Site Indexing: In order to index content that JavaScript apps render on client-side, Googlebot must run those JavaScript apps inside a full browser environment and capture the rendered DOM. This involves complex browser compatibility issues. Also, because JavaScript apps can make AJAX requests for further rendering, Googlebot must have a policy that controls apps’ network access. These are why getting your JavaScript app indexed properly by Googlebot is still challenging.
  • Faster overall loading time: Although an isomorphic application will be slower in responding an initial page compared to a client rendering application as it fetches data and renders more markups on the server-side before responding, overall completion time to the final user interface is faster because data access on the server-side is much faster than client-side API requests.
                                     

3. Frameworks

There have been several isomorphic JavaScript frameworks and libraries created, most notably Meteor framework and React library. Others includes Next.js, Nuxt, Rendr, Derby, Miso, Ezel and Catberry.

Free and no ads
no need to download or install

Pino - logical board game which is based on tactics and strategy. In general this is a remix of chess, checkers and corners. The game develops imagination, concentration, teaches how to solve tasks, plan their own actions and of course to think logically. It does not matter how much pieces you have, the main thing is how they are placement!

online intellectual game →