What is server-side rendering
Rendering: is to assemble data and templates into html
Backend rendering (server-side rendering)
Years ago, the web was a bunch of static pages built with HTML and CSS without much interactivity. Each user action requires the server to create and serve a complete page. In the case of back-end rendering HTML, the browser will directly receive the final HTML string presented to the user after calculation by the server . The calculation here is done by the server by parsing the template file stored on the server side. In this case In this case, the browser only parses the HTML, and displays the image represented by the HTML to the user on the display through a system call provided by the operating system for manipulating the display content of the display.
The websites of state-owned enterprises all use back-end rendering, that is to say, if you click, it will refresh one, and then request new page data from the background.
Advantages: The front-end takes less time (the front-end is only responsible for displaying html), which is good for SEO
Disadvantages: The amount of data transmitted over the network is large, occupying (part or a small part) of server computing resources, the amount of data output by the response will be (slightly) larger, and the front-end interaction and style of the template are changed.
Front-end rendering (client-side rendering)
The front-end rendering method originated from the rise of JavaScript. The popularity of ajax has made front-end rendering more mature. Front-end rendering truly realizes the separation of front-end and back-end. The front-end only focuses on UI development, and the back-end only focuses on logic development. , The front-end and back-end interactions only interact through the agreed API, the back-end provides json data, and the front-end loops json to generate DOM and insert it into the page.
Benefit: Small amount of data transmitted over the network (reduced server pressure)
Disadvantage: The front-end takes a lot of time, which is not conducive to SEO
In fact, the rendering essence of the front and back ends is the same, which is the splicing of strings, and the data is rendered into some fixed-format html codes to form the final html displayed on the user page. Because the concatenation of strings will inevitably consume some performance resources. so……
If it is rendered on the
server
side , then the performance of the server side is consumed. Therefore, when the number of users reaches a certain level, the backend will consider caching some data to avoid consuming too many resources and repeatedly rendering some places that do not require high timeliness to save resources. For example, for common leaderboards, the rendered modules can be cached and updated every ten minutes.
If it is rendered on the client side, common means, such as directly generating DOM and inserting it into html, or using some front-end template engines, etc. The principle of their initial rendering is mostly to replace the data tags (such as {{text}}) in the original html. Generally speaking, as long as document.write is not used without thinking, the performance consumption of the initial rendering on the browser side is acceptable.
The difficulty of browser-side rendering is how to save resources when the page changes responsively after data changes? You must know that the speed of reading and writing DOM directly is very slow, and it will trigger redraw if you are not careful. The impact of reading and writing DOM directly under complex SPA will be obvious. Take React and Vue as examples. After the data changes, he will help you to diff, and the parts that can be reused without changes will not be re-rendered.
SEO
browser-side rendering is not very friendly to search engines. Although there have been countless discussions and practices on how to do SEO in SPA, browser-side rendering is not as easy to do SEO as server-side rendering.
The back-end rendering html is called
spit
or
spray
, and the crawler can see the complete rendering source code. The
front-end template rendering html is called
filling, and the crawler
cannot see the complete rendering source code.
maintain
Server-side rendering is often done together with the front-end and back-end. In some teams, front-end developers directly write template files, but some teams write static html files in the front-end and change the back-end to templates. The latter team is more painful to maintain, and the front and back ends must be done together to change CSS (my last company did this)
how to choose
Regarding the choice of rendering on the server side or on the browser side, it depends more on the business scenario.
For example, a news site that focuses on SEO, a page that is not strongly interactive, does not make much sense to make a SPA, and it is recommended to render on the server side.
For background management pages, or strong interactive web applications such as Qzone, you can try browser-side rendering. Back-end developers can also focus more on the provision of interface services, without having to consider page rendering issues, and the division of labor and cooperation is more pleasant.
When rendering on the browser side, if the amount of data is not large and there is no major change, then it is more than enough to use the native DOM API to operate by yourself. Even if some operations sometimes waste some performance resources, the impact will not be too great. , it is a waste to introduce frameworks and libraries but only use part of the functions. But if you do a complex page application, I still recommend using a library/framework like Vue to help you do it. On the one hand, they will help you abstract business logic and prevent you from paying attention to rendering operations, which can improve development efficiency; on the other hand, I am afraid that most people implement rendering and DOM changes after data changes may not be better than libraries. /Framework well done. If he can do better, be sure to ask him to submit PR or issues for the mainstream framework/library to help the library/framework do better; or be radical, he can write a framework to benefit everyone.
Since you are already ahead, don't look back frequently!
Reference link:
link: https://www.zhihu.com/question/28725977/answer/116918471