This is the 30th day of my participation in the August Challenge

preface

The concept of server-side rendering has been getting a lot of buzz in recent years. It’s not a new technology, but a loading technology used in the beginning of the Internet.

So what is it that makes people want to wipe the dust off the past and bring the old concept of server-side rendering back to life?

What is server-side rendering?

SSR for short, full name is Server Side Render, which refers to a traditional rendering method, that is, when the browser requests the page URL, the Server will assemble the HTML text we need and return it to the browser. After the HTML text is parsed by the browser, The desired DOM tree can be directly built and displayed on the page without the need for JavaScript script execution.

SSR has two modes, single page mode and non-single page mode. The first mode is single-page application with the first rendering at the back end, and the second mode is back-end template rendering mode with the complete use of back-end routing. They differ in the degree to which back-end routing is used.

On the other hand, CSR (Client Side Render) is a popular rendering method. It relies on JS running on the Client Side, and the user can only get a small part of the guiding HTML code when sending the request for the first time. The second request will request more JS files containing HTML strings.

Why SSR?

At present, most of the popular front-end frameworks are suitable for the construction of SPA (single page application), in the SPA model, is to dynamically rewrite the part of the page to interact with the user, and avoid too much data exchange, the response speed is relatively higher.

However, the first screen of SPA apps is usually slow to open, because users need to download the CODE of SPA framework and application before rendering the page for the first time, and SPA apps are not conducive to SEO optimization.

At this point, people wonder if they can load the front page of the application first, and then let other JS files that are not used on the front page load slowly. However, because the JS engine is single threaded, the data assembly process will be blocked, and it is not easy to implement only on the browser side.

This is where SSR comes back to life. If you put the process of assembling data and rendering HTML pages on the server side, and the browser side is only responsible for displaying the received HTML files, the first screen will open much faster.

Advantages and Disadvantages of SSR

So, what are the advantages of SSR technology? Let’s list them:

  1. Faster response time. Compared to client rendering, server rendering already gets an HTML text with data after the browser requests the URL. The browser just needs to parse the HTML and build the DOM tree directly.
  2. Conducive to SEO, SEO key information can be directly rendered into HTML in the background, and ensure that the search engine crawler can climb to the key data, and then when others use the search engine to search for relevant content, your page ranking can be more advanced, so that your traffic will be higher.

The above are the two main advantages of SSR technology. Although there are advantages, the disadvantages should not be ignored:

  1. The renderer used in SSR naturally takes more CPU and memory resources than a server that simply needs to serve static files.
  2. Some common browser apis may not work properly, for examplewindow,docmentandalertAnd so on, if it needs to be used to determine the operating environment.
  3. Development and debugging can be a bit tricky because of the complexity of managing the life cycle of some of the SPA’s components because browsers and servers are involved.
  4. The results rendered on the server side may differ from those rendered on the browser side due to certain factors.

conclusion

The above is some brief introduction to SSR technology, to sum up is:

  • SSR improves the first screen response speed of SPA applications, which is conducive to SEO optimization.
  • SSR is most suitable for displaying static pages. Use it with caution if there is a lot of dynamic data on the page.
  • Whether to use SSR and to what extent should be carefully weighed by developers.

~

Thanks for reading!

~

Learn interesting knowledge, meet interesting friends, shape interesting soul!

Hello everyone, I am the author of “programming Samadhi”, I am king Yi, my public account is “programming Samadhi”, welcome to pay attention, I hope you can give me more advice!

You come, with expectations, I have ink to welcome! You return, no matter gain or loss, only to yu Yun give each other!

Knowledge and skills should be paid equal attention to, internal force and external power should be repaired simultaneously, theory and practice should grasp both hands, both hands should be hard!