了解ReactJS和NodeJS应用程序如何工作

Question

I'm trying to learn React JS, but I have difficulties understanding how it should work with NodeJS, let's say with Express.

So far I understand that ReactJS is "V" in "MVC" This is easy, I can already write a code using create-react-app

This is how I understand that:

1. "natural" way of combining React and Express is to simply write frontend in React and api in Express (with Mongo for example). This way we can simply make ajax calls from React to our /api and show data

2. there is also a possibility to use React to server side rendering, which requires little more configuration. This way we do not call /api from React, we just use React to write code which can be rendered by Express

My question is Am I thinking right ? Not sure about all that... Is Isomorphic JavaScript somehow related to #2 ?

Answer 1

You are mostly correct, but using server side rendering does not mean you do not also issue api requests ever. Server side rendering is a technique used to improve initial load time. Rather than pulling down your javascript bundle, which then makes some api calls to load a bunch of data it needs to render, you instead do that initial rendering and bootstrapping of the app on the server. The resulting html and initial state of the application are then returned to the client so the app can be shown immediately to the user. So when talking about server side rendering with react, it's really about the initial load.

After the initoal load, you still have a dynamic frontend applicatoon. You still end up making api requests as the user interacts woth the app. If I go to a different route in the app (assuming it's a single page app) which requires additional data, I'll still be issuing a GET request to load that data. If I click a button to update a resource, I'll still be issuing a PUT or PATCH request to do so.

So in terms of the question of how express and react fit together, express (or whatever backend language/framework you use) provides the api to interact with data in your data store. And react is allowing you to build views that consume those apis. Server side rendering is just an additional technique you can use, not a totally separate paradigm.