01 introduction

As the front-end system becomes more and more complex, more and more attention is paid to the front-end performance. Google is also pushing new performance-related metrics, evolving from metrics in the Performance API to metrics related to user Performance experience.

First Paint, First Meaningful Paint, and TTI have a direct impact on the user experience. There are plenty of best practices for front-end performance optimization, and this article will focus on front-end rendering solutions and their pros and cons.

02 CSR vs SSR

CSR: Client Side Rendering

Client rendering as the name implies, all page rendering, logic processing, page routing, and interface requests take place in the browser. In fact, modern mainstream front-end frameworks are all rendered in this way. The advantage of this rendering method is to realize the separation of the front and back end architectures, which is conducive to the separation of the front and back end responsibilities, and can quickly and effectively reduce the white screen time for the first rendering. Meanwhile, CSR can further improve the user experience of first rendering through pre-rendering or skeleton screen generation during packaging and compilation.

However, due to multiple interactions with the server (obtaining static resources and data) and dependence on browsers for rendering, the first screen time and fully interactive time are relatively long on mobile devices, especially devices with low configuration.

SSR: Server Side Rendering

Server-side rendering completes the page rendering on the server side, completes the page template, data filling, page rendering on the server side, and then returns the complete HTML content to the browser. Since all rendering is done on the server side, the site’s first screen time and TTI will perform better.

However, rendering needs to be done on the server side, so it is not good to separate the responsibilities of the front and back ends, and the white screen time is relatively long. At the same time, the load on the server side will be relatively high.

Integration of SSR and CSR based on Homogeneity

Both SSR and CSR have their own advantages and disadvantages. Therefore, the industry proposed a scheme of isomorphism in front and back end rendering to integrate SSR and CSR.

The entire page is loaded and refreshed through server-side rendering, with JavaScript and data content embedded in the HTML generated by rendering. Through such implementation, the same first screen time as SSR can be achieved. Based on Hybration, the virtual Dom of the front end can be generated to avoid the second rendering triggered by the front end.

Comparison of PAGE rendering experience between SSR and CSR:

Comparison of SSR and CSR at different stages:

Serverless SSR

The front end using SSR to render isomorphism has a very obvious disadvantage: service resource consumption and operation and maintenance. Under normal circumstances, isomorphic SSR will use Node service, which requires fixed server resources, and the operation and maintenance of the server also puts forward high requirements for the front-end students.

With the advent of Serverless technology, these problems seem to be well resolved. Serverless invokes cloud-deployed functions based on triggers and then invokes back-end services.

For the front-end students, only the implementation of cloud functions is required, and the operation and maintenance management of the server is not concerned at all. At the same time, the server will realize automatic elastic expansion, effectively saving machine resources.

Of course, Serverless is not a panacea, and cold startup of servers is still a very big problem.

SSR outperforms CSR in terms of performance benefit, and with The cooperation of Serverless, THE development cost of SSR is only slightly higher than that of CSR. Therefore, from the perspective of revenue cost, Serverless SSR has a great advantage and may become a trend in the future.

03 NSR

UC browser adopts NSR (Native Side Rendering) in page loading of news feed stream. Firstly, offline page template is loaded in the list page, page data is preloaded through Ajax, and Html data is generated through Native Rendering and cached in the client.

NSR is distributed SSR in nature, which puts the rendering work of the server in a separate mobile device, realizing the preloading of the page without adding additional server pressure.

04 ESR

The core concept of the program is to return static content and dynamic content to users successively in streaming mode with the help of Edge computing capability. Compared with server, CDN nodes are closer to users and have shorter network delay. On the CDN node, the static part of the page that can be cached is quickly returned to the user. Meanwhile, the dynamic content request is initiated on the CDN node, and the dynamic content is returned to the user after the response flow of the static part.

As can be seen from the above results, under the condition of slower network speed, the final main elements rendered by CDN streaming will come out earlier than the original SSR method. This is also true because the slower the network, the slower the loading time of static resources, and the more obvious the effect of the corresponding browser loading static resources in advance. In addition, no matter what network conditions, CDN streaming rendering mode of the white screen time is much shorter.

05 summary

CSR, SSR, NSR, ESR, front-end rendering schemes are so complicated. In fact, each rendering scheme has its advantages and disadvantages. Therefore, it is necessary to choose a suitable scheme based on its own business needs and balance benefits and costs.

“Dad” has been engaged in Internet research and development for more than 10 years, and has worked in IBM, SAP, Lufax, Ctrip and other domestic and foreign IT companies. Currently, he is in charge of the big front-end technology team related to catering in Meituan, and regularly shares his thoughts and summaries on big front-end technology, investment and financial management, and personal growth.