node.js - react+express同构开发，数据端与服务端需要分离吗？

Question

现在的提供数据服务的后台也是express的
目前准备开发一个前端，采用react+express的同构开发模式，服务端渲染页面
请问我这个前端的react+express和正在使用的express数据后台需要分离吗？
如果不需要，直接在现在的后台中+react构建前端，是否要前端工程师与后端工程师共同维护这个工程，会不会出现什么麻烦？
谢谢！！！

Answer 1

1. Server-side rendering is done in your original background. Return the html string to the react front-end, and the react front-end is responsible for the display.

2. I think it is usually maintained by one person, even if It doesn't matter if two people maintain it. Co-work is part of the job, so don't worry.

3. Add a little bit about the difference between client-side rendering and server-side rendering (client-side rendering vs server-side rendering)

• Lantency(delay) The first loading of server-side rendering will be very fast, because there is no need to request js, css and data like client-side rendering, and then assemble and display them. Server-side rendering directly strings the html to the front end. But when the page data is partially updated or subcomponents need to be re-rendered, server-side rendering will be much slower, because you have to initiate a network request, re-generate most or all of the updated HTML string on the server, and then return it to the client. . But for client-side rendering, it only needs to be partially re-updated.

• SEO(Search Engine Optimization) Client-rendered pages are not friendly to search engines. Search engines usually only see the html of the page and will not execute js. When the page rendered by the client returns only an html template, the real content must be filled in by executing js, which is not friendly to search engines. Of course, there are solutions (PhantomJS I will note the introduction and reasons of PhantomJS later) , but this will only increase the complexity of your program and is not recommended. For server-side rendering, the complete HTML string has been generated by the server, which is conducive to search engine analysis.

• Browser Concept and Issues (browser concepts and issues) Server-side rendering ensures the definition of pages are documents. The client requests the page document through the URL. You should get the text of the document, not a program and then execute it on the front end. . There is also the issue of browser compatibility. The more operations the client renders to the browser, the greater the possibility of compatibility problems.

Note: PhantomJSIntroduction

• PhantomJS is a headless browser

• PhantomJS can solve the problem of client-side rendering being unfriendly to search engines. It can pre-render HTML/JavaScript/CSS before the data is returned to the client. This means that when the page is loaded, all The initialized js has been executed.

• Since it can solve the problem of client-side rendering being unfriendly to search engines, why not use it?

Main reasons:

• If you start an PhantomJS instance for each request, then if the search engine crawls multiple pages at the same time, the performance of your machine will be affected;

• PhantomJS is running an old version of js;

• Difficulty debugging;

• To put it bluntly, the cost of introduction is too high and not worth it! ! ! !