1. What is Isomorphic Process?

The isomorphic process is a process of rendering an web application on a browser in the following steps:

When a user requests a web page, the server queries for the database and API and asks the app for the HTML, and app renders the given information it has, then the server sends the client the rendered HTML.

So when the application renders on the client device while the users are enjoying different content, the client requests Javascript from server and bootstrap the application. Client application recognizes the pre-rendering HTML and binds it together. Application finishes loading several seconds after we got the initial content.

2. Advantages of Isomorphic Process

There are two aspects of advantages of the isomorphic process:

Functional Aspect:

• Code is shared between the front-end and back-end of the application.
• Faster load time and it provides automatic support for the legacy browsers.

Technical Aspect:

• The server renders the HTML on the initial page load.
• Less code to write and maintain .
• Developers have to learn the fewer language.
• Data is stored in congruent data format(JSON Format).
• Library can integrate with itself.

3. Disadvantages of Isomorphic Process

The disadvantages of the Isomorphic Process are as follows:

• The architecture of the whole application becomes complex.
• Troubleshooting is very much challenging due to the complex architecture of the application.
• Sensitive data can be prone to exposure on the server.
• Several points of possible failure.

The third point of the disadvantages leads us to the next point of our discussion.

4. How Sensitive Data is Exposed?

In the Isomorphic process, when the developer authorizes a client-facing module, there is a dependency of the module which requires a file containing secret data. Application is bundled with that file and sent to the client with all secret and private data which an attacker can easily access by searching the bundle file.

5. Isomorphic Application Priorities

There are several priorities of the Isomorphic process for development as well as the production environment of the application:

Development

• Application updates quickly after source code.
• Additional round trip is required to fetch data.
• Code needs to be organized, clear, and highly traceable.
• Tooling is needed to allow the developer to see the application’s internal state.

Production

• Application is not concerned with updates to a source.
• Additional round trips significantly slow applications on mobile and greatly increase the odds of users closing the application before it even loads.
• Code should be compact and should not expose sensitive data
• Tooling is needed to track user activity and expose bugs.

6. ReactDOMServer

ReactDOMServer is an object that enables us to render components to static markup, ReactDOMServer generates static HTML Markup based on the parent component and initial state, and leverages virtual DOM which is used on the client to promote performance. ReactDOMServer is designed on the server (No Browser Dependencies).

The ReactDOMServer are of two types:

• renderToString( )
• renderToStaticMarkup( )

7. React Router Server Rendering

First Server receives requests and notes paths, creates history components, and injects paths, then the application is wrapped in the history component and rendered on the server. React Router needs a path from history to render the appropriate view. Pre-rendered HTML is sent directly to the user, subsequent route changes are handled by the client.

8. Hot Module Replacement in Production

In production, Pushing updates to the application while your end-user is using it, puts more stress on the server as it struggles to keep thousands of client instances updated.

Reference: https://yudhajitadhikary.medium.com/isomorphic-implementation-of-react-fa6e129c246f