55

I was going through React tutorials and on the web I saw a lot about isomorphic React. Just got confused on what it is and how it works.

My understanding is that "isomorphic React" is an application is that it loads all the data required at start-up and then it keeps rendering on the client side as per user's request, holding the complete data in store (Redux architecture).

Now what if I have a scenario like I need to load my complete HTML form using webservice from a 3rd party application where I get the data from it as a json (schema of what fields need to be rendered on the screen) and upon performing some action I need to send the request back so that I will get some other schema to load it as my next screen.

In this scenario how do I use isomorphic, as every time I need to make a server call or an ajax call (which I do not like to do as it might expose the APIs).

So in this case can I say this application as isomorphic or my understanding with regard to isomorphic is completely wrong?

halfer
  • 19,824
  • 17
  • 99
  • 186
Pathfinder
  • 934
  • 1
  • 12
  • 23

2 Answers2

56

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

With regard to web apps, this means that the server is somehow similar to the client - in the sense that the server is capable of rendering as much as the client. In a way, isomorphic web apps are a return to the old paradigm where the server would render data and then send it pre-rendered to the client (think PHP templates or Ruby erb).

Specifically with isomorphic React, this means that the server renders the initial HTML for the client using React components and React.renderToString(). This eliminates double work such as having erb templates on the server side when using Rails but then using Handlebars for client-side templates and also avoid the FOUC. You can just use React for everything.

Now, if you're using a 3rd party service, you'd just use the json data as usual. What would make your app isomorphic or not would be whether your own server uses the same templating engine as your front-end. Any third party services you might consume have no bearing on whether your app is isomorphic or not.

Pedro Castilho
  • 10,174
  • 2
  • 28
  • 39
  • 1
    Nice explanation! Could you advise some technologies to implement isomorphic React using PHP? What would you use to render server side and then continue the modifications on the client as the user interacts with the page? – tonix Aug 19 '19 at 16:06
  • 4
    @tonix The idea is to render React components to HTML on the server-side, so you would usually make the server with Node.js and use [React DOM Server](https://reactjs.org/docs/react-dom-server.html) to render the HTML. Since you also need to pass the whole state to the client, you would use a state container like Redux, and `JSON.stringify` it and pass it to the client in a ` – programmer Oct 26 '20 at 18:55
  • @programmer Thank you for your comment and for the insight! Why `ReactDOM.hydrate` and not `ReactDOM.render`? – tonix Oct 26 '20 at 21:32
  • @tonix the server does a "partial render, then compress" of the content, so you need to use `hydrate` to undo the compression process and use the partially-rendered parts. – Pedro Castilho Oct 27 '20 at 14:18
  • @programmer OK, so this is an implementation detail of server-side React, isn't it? – tonix Oct 27 '20 at 16:45
  • Yep. And I'm not @programmer. :P – Pedro Castilho Oct 27 '20 at 22:15
  • Hi, did you say server side rendering? – Aljohn Yamaro Jan 05 '21 at 04:34
16

Understand Isomorphic at high level.

Server driven world : In this world, when user open a page in the browser, there are lot of interaction happened between client(browser) and server. In order to load page in the browser, the browser and server go to work by sending request and rendering to provide a webpage to the user. In this world, server was in charge of rendering each page in response to user interaction. For example; if user click on submit button then request goes to server with the data user entered in the form and in response server will return the new HTML with data to the browser to show next screen. Here server is responsible for UI too along with business logic and data model. This approach has many advantage and disadvantage.

Client driven world or Single page application world In this world, webpage rendering responsibility was handed over to the client (browser) and server was responsible mostly for business logic and data model. This again has lot of advantage and some disadvantage.

Client side and server side rendering world each has its own benefits and 'Isomorphic JavaScript’ is the way to obtain the best of both the worlds.

And React is a framework to provide isomorphic support out of the box.

Avtar Sohi
  • 295
  • 3
  • 4