Questions about the frontend and backend separation mode

Questions about the frontend and backend separation model: the frontend and backend work is mixed at this stage. The demo is written at the front end and the data is rendered at the backend. if a bug occurs, debugging is time-and effort-consuming. Therefore, the frontend and backend are in urgent need of separation, I have searched the internet for a long time. Generally, the SPA mode and node mode use cross-origin...Questions about the frontend and backend separation model

At this stage, the frontend and backend work is mixed together, and the demo is written at the front end to render data in the background. Once a bug occurs, debugging is time-consuming and laborious. Therefore, the frontend and backend are in urgent need of separation and searching the Internet for a long time, usually the SPA mode and node mode.

In SPA mode, cross-origin requests are used to obtain data. But it is not conducive to SEO optimization.
So I have read the NODE-based separation model:

I don't know if this mode is correct. if you have other good solutions, please let me know. thank you very much!

Reply content:Questions about the frontend and backend separation model

At this stage, the frontend and backend work is mixed together, and the demo is written at the front end to render data in the background. Once a bug occurs, debugging is time-consuming and laborious. Therefore, the frontend and backend are in urgent need of separation and searching the Internet for a long time, usually the SPA mode and node mode.

In SPA mode, cross-origin requests are used to obtain data. But it is not conducive to SEO optimization.
So I have read the NODE-based separation model:

I don't know if this mode is correct. if you have other good solutions, please let me know. thank you very much!

There are roughly three types:
1. the front-end maintenance page template is responsible for development. it is pushed to the backend at the time of release, and the backend deployment and O & M. For example, for vm, there is a velocityjs that can display the number of compiled fields on the node side, and the front end can complete page development locally. The coupling part with the backend is the page rendering data, which can be agreed in advance to determine the data format and local mock;
2. the spa is not necessarily cross-origin. the page is maintained at the backend, with a uniform shell. the backend only needs to maintain the js referenced by different pages, and JavaScript can insert something into the page, of course, all the data is done asynchronously by the client. As for seo, you can use phantomjs to store other pages and then configure ng to cope with crawlers. In fact, this solution is a big problem because it is not displayed after the page comes in, that is, the white screen will take a long time, but will execute js and be displayed only after the data is obtained asynchronously, there are many problems. Of course, it is common to use offline packages or cache to optimize this experience in the app and other links;
3. node. I think there is no problem with your picture, except that php has various implementations, such as java and node. json is nothing more than reducing frontend and backend coupling, it can be determined in advance and not changed. it is enough for parallel development. The introduction of node is nothing more than enabling the front-end to directly provide pages for access. However, if the front end writes a node page rendering each time, it is also a relatively large development cost. Then there is a homogeneous idea, such as the homogeneous reactjs. node only provides a router, and the other page processing servers are completely consistent with the client.

For my personal opinions, I hope it will be helpful.

Basically, we are responsible for providing JSON or JSONP data in the background. after the front-end obtains the data, it displays and renders the data. no problems have been found. I don't know what the subject said: Once a bug occurs, debugging is time-consuming and labor-consuming.

All data is implemented by the backend and the front end is responsible for page implementation. data can be obtained from the backend server through ajax.