Rendering and pre-rendering of React server

You need to use the reactive-router-config library, which can match the corresponding component according to the route, and obtaining the component corresponding to the current route is the key to realize route synchronization, and then obtain the interface data through the static API method of the component.

Mainly, the server creates a store after obtaining the interface data through the static API method of the component, and then passes it to the front end through the window. Shop = shop.

The main purpose is to attach the front-end js file to the template html file rendered by the server.

Application scenario of server rendering: Generally, it is only done for important pages, such as home page, which can improve the loading speed of the first screen and is beneficial to SEO. Other pages are actually CSR.

Pre-rendering does not compile html in real time like server rendering. It only generates several specific static pages for a specific route when building, that is to say, we can compile some specific page components into HTML files when building through Webpack plug-ins and directly output them to search engines as static resources.

1, SPA becomes MPA.

2. Historical routes must be used instead of hash routes, so servers often need to configure routes for pages that are not pre-rendered. For example, nginx is configured as follows:

3. Dynamic routing, such as /detail/:id, is not supported, but query routing can be used instead, such as /detail? id=

4. The application scenarios are limited, and all we can think of is skeleton screen applications, such as home pages. For speed, we will use some skeleton screen components. If you don't pre-render, the skeleton screen component will wait until the entire js file is loaded before rendering, and the experience is not good. If the pre-rendering is completed, the rendering will start when the html file is loaded.