What is an isomorphic reaction means?

Question

I went through React tutorials, and I saw a lot about isomorphic Reat on the Internet. Just confused about what it is and how it works.

According to my understanding, the Isomorphic React application is that it downloads all the data necessary for the launch itself, and then saves the client-side rendering in accordance with a user request containing all the data stored in memory (Redux architechture).

Now, if I have a scenario like this, I need to load my full HTML form using webservice from a third-party application, where I get data from it as json (a diagram of what fields need to be displayed on the screen) and after performing some action I need to send the request back so that I get another circuit to load it as the next screen. In this scenario, I use isomorphic, because every time I need to make a server call or an ajax call (which I don't like to do since it can expose the API)

So, in this case, can I say that this application is isomorphic, or is my understanding of wrt isomorphic completely incorrect ??

Answer 1

Isomorphic: "corresponding or similar in form or relationship."

As for web applications, this means that the server is in some way similar to the client - in the sense that the server is able to display as much as the client. In a sense, isomorphic web applications are a return to the old paradigm where the server will display the data and then send it to the previously rendered client (think of PHP or Ruby erb ).

In particular, with isomorphic React, this means that the server displays HTML source code for the client using the React and React.renderToString() components. This eliminates duplicate work, such as server-side erb patterns when using Rails, but then using Handlebars for client-side patterns, as well as the FOUC exception. You can just use React for everything.

Now, if you use a third-party service, you will just use json data, as usual. To make your application isomorphic or not, whether your own server will use the same template engine as your interface. Any third party services that you can use are not related to whether your application is isomorphic or not.

Answer 2

Understand isomorphism at a high level.

Server-driven world . In this world, when a user opens a page in a browser, there is a lot of interaction between the client (browser) and the server. To load a page into a browser, the browser and server start working by sending a request and rendering to provide the user with a web page. In this world, the server was responsible for rendering each page in response to user interaction. For example; If the user clicks the Submit button, the request is sent to the server with the data entered by the user in the form, and the response server returns a new HTML code with the data to the browser to display the next screen. Here, the server is responsible for the user interface along with the business logic and data model. This approach has many advantages and disadvantages.

The client-driven world or the world of single-page applications In this world, the responsibility for displaying web pages was transferred to the client (browser), and the server was mainly responsible for the business logic and data model. This again has many advantages and disadvantages.

The client-side and server-side rendering world has its advantages, and "Isomorphic JavaScript is a way to get the best of both worlds."

And React is a platform for providing isomorphic support out of the box.