preface

Now web sites are very particular about user experience, generally will use server-side rendering and client-side rendering together to achieve the function. Server-side rendering is conducive to search engine optimization (SEO), which is conducive to data capture by web crawlers. It is commonly seen in commodity information acquisition of e-commerce websites. Client-side rendering is not conducive to search engine optimization, asynchronous web page data acquisition, long loading time of the home page, relatively good user experience, and is often used in places that do not need SEO friendly.

  1. Server Side Rendering (SSR)

After the browser sends the request, the server renders and analyzes the client’s web page and data in the background, and then returns the rendered result to the client.

The client gets the rendered result and can display it directly. When a page rendered on the server is transmitted across the network, it is transmitted as a real page. Therefore, when the crawler client climbs to our page, it will link to the page provided by us. At this time, the key data in our page will be collected by the crawler. Server-side rendering can solve the problem of long white screen time on the home page, but it is also easy to cause server pressure. Therefore, server-side page caching technology can be used to reduce server rendering pressure.

  1. Client Side Rendering (CSR)

In today’s world of SPA frameworks, Vue, React, Angular, the front and back end separation of development is unusual. The simple understanding of client rendering is that the browser sends a page request, and the server returns a template page. During the parsing process from top to bottom, the browser needs to send Ajax requests to obtain data, and finally call the template engine (art-Template, etc.) to render THE HTML structure, and add the rendered result to the specified container of the page.

Because the data is asynchronously acquired, the client rendering initiates at least two requests in the process of displaying the complete page. The data is dynamically added to the page. Therefore, it is very bad for SEO and facilitates the development of the front and back end separately. Nowadays, it is very common for the front-end to use Vue and other frameworks for development. Therefore, in order to solve the problems faced by pure client rendering, many similar ideas of USING SSR and isomorphism in Vue are also very common.

tip

How can I quickly determine which pages are server-side and which are client-side renderings?

  1. Right mouse view source code, see the content in the page can also be viewed in the source code, is rendered by the server.

  2. Right-click the mouse to view the source code, the page to see the content in the source code can not be viewed, it is the client rendering.

Let me give you a little example

Open a commodity list page on JINGdong, right click to view the source code of the page, and see that the commodity information is rendered by the server.

Then open the user comment area, see the information is the result of client rendering.

instructions

This article is one of my series of Node.js tutorials. The tutorials will be updated synchronously on Github. If you find them helpful, I hope you can star.

Original pubDreamcc @github