takeaway

This article focuses on server-side rendering from three aspects, collated from multiple blogs.
  • What is server-side rendering? What is server-side rendering? (How server-side rendering works)
  • Why use server-side rendering? What problem does server-side rendering solve?
  • When is server-side rendering used? (Application examples and usage scenarios rendered by the server)

A concept,

First, when it comes to server-side rendering, we need to have a general understanding of the concept of rendering

Rendering: To assemble HTML from data and templates

Client Rendering (CSR) VS Server Rendering (SSR)

So, in order to better understand server-side rendering, it’s important to take a look at client-side rendering as well. Learn and understand client-side and server-side rendering at the same time.

1. Client rendering
1.1 concept

Explanation 1: in client rendering mode, the server sends static files to the client, and the client takes the files sent by the server and runs JS. According to the results of JS running, the DOM is generated and rendered to the user.

Explanation 2: HTML is only a static file, when the client requests, the server does not do any processing, directly returned to the client in the form of the original file, and then according to the JavaScript on the HTML, generated DOM into THE HTML.

Extension: Front-end rendering is originated from the rise of JavaScript, and the popularity of Ajax makes front-end rendering more mature. Front-end rendering has realized the separation of front and back ends in a real sense. The front end only focuses on the development of UI, and the back end only focuses on the development of logic. The front-end loop generates the DOM to insert into the page.

1.2. The pros and cons

Benefits: small amount of data transmission network, reduce the server pressure, front and back end separation, local refresh, no need to request a complete page each time, good interaction can achieve various effects

Cons: Bad for SEO, crawlers can’t see the full program source code, slow rendering of the first screen (need to download a bunch of JS and CSS before rendering)

2. Server rendering
Concept of 2.1.

Explanation 1: Before the server returns the HTML, it fills it with data in certain fields, symbols, and gives it to the client, who is only responsible for parsing the HTML.

Explanation 2: In server-side rendering mode, when a user requests a page for the first time, the server renders the required component or page into an HTML string and returns it to the client. What the client gets is HTML content that can be rendered and presented to the user without having to run through the JS code to generate the DOM content. A web site rendered on the server is “WHAT you see is what you get.” The content rendered on the page can be found in the HTML source file.

2.2. The pros and cons

Benefits: Fast first screen rendering, SEO benefit, cache fragment generation, static file generation, energy saving (compared to the power consumption of client rendering)

Disadvantages: Poor user experience and difficult maintenance. Usually, some HTML or CSS needs to be modified in the front end and the back end also needs to be modified.

3. The comparison

In fact, the nature of the rendering at the front and back ends is the same, which is the stitching of strings. The data is rendered into some fixed HTML codes to form the final HTML to be displayed on the user page. Because string concatenation inevitably consumes some performance resources. If you render on the server side, you are sacrificing performance on the server side. If rendering is done on the client side, common methods such as directly generating the DOM and inserting it into the HTML, or using some front-end templating engine, etc. Most of their initial rendering is done by replacing data tags (such as {{text}}) in the original HTML.

Why use server-side rendering and what problem does it solve

In short, there are two points:

Compared to single-page apps, I only need to load the content of the current page instead of loading all JS files like React or Vue. SEO Optimization For single-page apps, search engines cannot include ajax crawling data and then dynamically render JS pages.

To make it easier to understand, here are some quotes from the prospectus:

In fact, many sites use server-side rendering for the sake of efficiency, rather than performance. Assume that there is A keyword called “front-end performance optimization” in the page of website A. This keyword is added to the HTML page after the JS code runs through it. So in client rendering mode, we can’t find website A when we search for this keyword in the search engine — the search engine will only look for ready-made content, not help you run JS code. The operator of A website sees this situation and feels very big: search engines can’t find us and users can’t find us, so who will use my website? In order to present “ready-made content” to search engines, site A has to enable server-side rendering. But just because performance comes second doesn’t mean it’s not important. Server rendering solves one of the key performance issues — the slow loading of the first screen. In client-side rendering mode, in addition to loading the HTML, we have to wait for the part of JS required for rendering to load, and then have to run the part of JS in the browser again. All of this happens after the user clicks on our link, and until the process is over, the user doesn’t see the real face of our page, which means the user is waiting! In contrast, server-side rendering mode, the server to the client is a direct can be taken to present to the user’s web page, the middle link as early as in the server to help us do, the user is not “happy”?

When to use server-side rendering?

Through the concept of server-side rendering and its two characteristics: fast first screen loading speed, SEO optimization. As we know, server rendering is actually something done by the browser, we put it into the server to do, so for nuggets, Jane book, CSDN, Zhihu and other sites to build, this kind of web site found a bunch of things, SEO does very well, how much should be used to render the server? Of course, doing server-side rendering is expensive. Vue buckets or React buckets are recommended to implement routing through server rendering. Server rendering is not a complete solution (servers are rare and precious), there are many optimizations for the first screen rendering experience and SEO, and the best thing we can do without server rendering is find alternative optimizations.

The choice between rendering on the server side or on the Browser side depends more on the business scenario.

Related articles to read

Blog.csdn.net/b9q8e64lo6m… (suggest)