A brief talk on Server rendering (SSR)

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.

Different crawlers work similarly, crawling only source code and not executing any scripts for the site (with the exception of Google, where Googlebot is said to run javaScript). With the use of React or other MVVM frameworks, most of the DOM elements of the page are dynamically generated by the client based on js, and the content available for crawler crawling analysis is greatly reduced (see figure 1). In addition, browser crawlers don’t wait for our data to be finished before grabbing our page data. What server rendering returns to the client is the information that can be crawled to the full page in the final HTML, network crawl where asynchronous data has been obtained and the JavaScript script is executed.

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.

Data request

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

Related Passages:

Leave a Reply

Your email address will not be published. Required fields are marked *