DEV Community

Cover image for Do you know Isomorphic JavaScript?
Abhinav Kale
Abhinav Kale

Posted on • Updated on

Do you know Isomorphic JavaScript?

In programming we tend to hear a lot of really strange words such as isomorphism, etc.

What is Isomorphic?

In general term "iso" means "same" and "morphic" means "form" ie same form that we are studied from our childhood.

In simplest terms isomorphic javaScript is the javaScript that can be run on both the server as well as on the client.

Let's discuss with examples below.

IsoJs function

This code snippet is isomorphic, the code will run in a
node.js environment and it will also run in the web browser.

IsoJs Browser

This code doesn't uses any node-specific libraries or browse any web apis, it's just an arrow function in javaScript that will run in environment.

Now let's have a look on another example which is not isomorphic.
We will be using fetch api to get some data from external api(NewsAPI).

Fetch API

This code is not isomorphic because the fetch function is provided by the web browser and results in ReferenceError.

If we want to run on both the client and the server we have to import a third-party library such as axios. The code something looks like this


This would be considered as isomorphic javaScript but it's important to note that we only need one successful path that will run on both the server and the client in order to be considered isomorphic.

If we have a javaScript function that checks the environment to determine whether or not it's on the client or the server and then it has the path for both of those cases then that can be considered as isomorphic javaScript for example this

Check Isomorphic

This code checks for the window object and determines whether or not it is running on the client or the server and then logs the result.

Check Iso Browser

This is isomorphic because it will run on both the server and the client so it's important to note here that isomorphic javaScript is the way that we write the code and
it's "not a particular technology" it's just sort of like a design pattern. Writing code in this way allows you to be able to do certain unique things such as server side rendering.

Hope this information helps you to understand isomorphic javaScript.
Thanks for reading and happy coding!

Top comments (0)