What is an isomorphic application? What is an isomorphic application? reactjs reactjs

What is an isomorphic application?


They are, more recently, also called universal. I'm not sure about the whole app being called isomorphic/universal, but you can certainly have parts of the code base that is universal.

Isomorphic/universal code is code that runs on both the client (browser) and on the server (NodeJS). Since they are both JavaScript this something that is possible if:

  1. you do not mention window, document or any other browser-only methods
  2. you do not mention server, fs or any or any other node-only methods.
  3. If you do need to do the above within some code that is meant to be universal, you should wrap it in a function that either mocks the required method within the alternate environment or wrap it in conditionals so that the app doesn't crash.

An example is console.log which will work both within NodeJS and any browser, along with most other es6 methods in modern browsers.

I use build tools (like webpack) to then help create / export functions within individual files so that we then have a bundle like client-app.js which is included in the HTML file and is the browser only js. The server then might start using server-app.js which is the server-only bundle. Both bundles can be created using a lot of the same universal source code.