Intro: Recently, a c-side project has been reorganized into a first-screen server-side rendering (SSR:server side render))Technologies used in the project: React, webpack, koa2, webpackIt is not necessary to
Recently, a c-side project has been reorganized into a first-screen server-side rendering (SSR:server side render))
Technologies used in the project: React, webpack, koa2, webpack
It is not necessary to reconstitute SSR,redux, so it is useless to redux
This article will first describe some theoretical things, and then write a code article.
The simple understanding is that the component or page generates an html string through the server, sends it to the browser, and finally “mixes” the static tag to a fully interactive application on the client.
As shown in the following figure, the left page does not use service rendering, when the user page is requested, the returned body is empty, and then the js is executed to inject the html structure into the body, which is displayed in combination with css.
The right page uses server rendering, and when the user page is requested, the returned body already has the html structure of the first screen, which is then displayed in combination with css
1. It’s better for SEO.
two。 It is more convenient for the first screen rendering.
The rendering of the first screen is the html string sent by node and does not depend on the js file, which will enable the user to see the contents of the page more quickly. Especially for large single-page applications, after packaging, the file volume is relatively large, ordinary client rendering load all the required file time is longer, the home page will have a long white screen waiting time.
Originally done through the client, it is now unified to the server-side node service. Especially in the case of high concurrent access, it will occupy a large number of server CPU resources;
In server-side rendering, only the life cycle hooks before componentDidMount will be executed, so the third party libraries referenced by the project can not use other life cycle hooks, which limits the selection of reference libraries.
In addition to familiar with webpack, React, but also need to master node, Koa2 and other related technologies. Compared with client rendering, the project build and deployment process is more complex.
One of the main reasons for “fast” is that the server requests the first screen data, rather than the client requesting the first screen data. The server inner network carries on the request, the data response speed is fast. The client makes the data request in different network environment, and the external network http request overhead is large, causes the time difference. The following figure shows the data request route rendered by the server and the data request roadmap rendered by the client
The specific process can be referred to the following two diagrams