Isomorphic JavaScript is JavaScript code that can run both on a web browser and a server. In this post, we specifically are dealing with the web browser and NodeJS JavaScript environments. Sometimes, JavaScript that can run in the browser cannot run in NodeJS:

// NodeJS enviornment throws error because document is not defined.
render(
  <Provider store={store}>
    <App/>
  </Provider>,
  document.getElementById('root')
)

If the code above was executed in a NodeJS environment, we can expect the following error:

ReferenceError: document is not defined

This is because the document object does not exist in NodeJS. Like the document object, the browser’s window object also does not exist in NodeJS.

An opposite can happen in the browser. NodeJS’s File API is an API that can read and write to disk. This API is not available in the web browser’s JavaScript enviornment and will throw an fs is not defined error if you try to use it.

So any object that is found in one JavaScript enviornment that is not found in the other, will thrown an error. This JavaScript is not isomorphic.

How Do You Write Isomorphic JavaScript?

Simply write JavaScript that can executed on both the web browser and NodeJS.

End Goal

With Isomorphic JavaScript, we can use a technique called Server Side Rendering to acheive fast page load and SEO benefits.