ReactJs Blog: The one where Anubha wants to know what an ISOMORPHIC React App means.

One fine day a very good friend of mine Anubha walks up to me and says, Hey Shashank, read your blog on React the one with the single HTML file ( https://medium.com/@shashankkaushik/reactjs-blog-the-one-with-the-single-html-file-f524e79ee69a#.mit4itj2h ). It got me started with React and I researched a bit on my own and came across something called ‘ISOMORPHIC React Application’ but after searching quite a bit I just couldn’t wrap a my head around it. Can you help me with that.

[ ISOMORPHIC : corresponding or similar in form and relations ]

So here is the blog explaining what an ISOMORPHIC React app means.

Pre-requisites: Your machine needs to have node installed.

(if you don’t have node installed please go to NodeJs website https://nodejs.org/en/download/ and install the same).

Go to https://github.com/shashank-blog/isomorphic-example download the code as zip.

Unzip the code, open your terminal and go the folder that you unzipped (isomorphic-example-master).

If you want you can open it in some text editor.(I use atom) This is what it looks like.

You will see a lot of files. In this tutorial I will not be going over all these and you shouldn’t worry about these as well because knowledge of these files and what they do is not required.

Run the following commands in your terminal.

1. “npm install” (This command will install dependencies required by this app to run). It will take some time to install. After this is done. (if it fails try using sudo).

2. Open another tab in you Terminal. In your first tab run “weback -w” (don’t worry about what it does). In second tab run “node app.js”. (When you run app.js make sure no other application is running on port 3000 as our app listens to port 3000).

You will see something like this when you run webpack -w.

and something like this when run node app.js

So some server has been started at 3000.

Go to your browser (chrome preferable) and open http://localhost:3000. You will see something like this

(Wait just a little while Isomorphism is around the corner).

Now open developer tools. (Basically we have to disable JavaScript)

( On Mac — Command + Shift + C.

On Windows / Linux — Ctrl + Shift + C OR F12. ).

Now click on the three dots that you see on the left hand slide next to the cross sign.

Click on settings.

Now reload the Page. You will see something like this.

Which is exactly same as the previous one (with JS enabled).

This is what is happening.

So our server is sending the HTML pre-rendered (as string which is then displayed by the browser) , so even if JavaScript is disabled we will see the HTML page (with CSS applied).

Advantages of this feature are:

1. User will see something instead of a blank page enhancing User experience (can interact with the page once JS loads).
2. It greatly helps SEO as crawler bots are also having JS disabled.
3. You don’t have to put everything onto one bundled file because you have a server running which can serve files on demand.
4. Especially advantageous for enhancing Mobile experience. (There isn’t an empty page while the user waits for the bundle to be downloaded)

This is what an “ISOMORPHIC React app” means.

The first load does not depend on the JS file to be loaded but is done with the pre-rendered string sent by the server thus the word ISOMORPHIC.

Lastly, I would like to show a live example of a production website called paytm.

Go ahead and do the same JS disable thingy on paytm (Link: www.paytm.com). You will notice that the page never loads.

Now in google search mobile or DTH recharge you will see paytm on the first page. This is because they there are some SEO links on the main HTML page (yes the one where you saw nothing is being loaded).

but if go and search something like playstation console or anything paytm won’t be visible even on the third or fourth page.It is because of the same reason.

There may be other reasons as to why this happens but is definitely one of them as well.

So this brings us to the end of the tutorial. I hope now Anubha understands what Isomorphic React App means :)