With the evolution of front-end technology, front-end rendering is constantly innovating. The appearance of edge computing makes front-end rendering step from SSR (Node) era into ESR era. This paper mainly introduces the development and evolution of front-end rendering, as well as the principle, advantages and application scenarios of edge rendering. The main contents are as follows:

  1. Development of front-end rendering
  2. Principles and advantages of edge rendering
  3. Example Application Scenarios
  4. Summary and Outlook

01 Development of front-end rendering

Before we talk about front-end edge rendering, it is important to understand the history of front-end rendering and how the optimization of front-end performance metrics was put on the agenda, and then we will see the emergence of edge rendering (ESR).

In fact, the whole front-end rendering method is constantly innovating with the evolution of front-end technology, which can be roughly divided into the following process.

SSR (Server Side Rendering) Era (JSP, PHP)

The earliest front-end renderings (prior to the introduction of Ajax in 2005) were written with a mix of back-end, JSP, PHP, etc. However, the combination of front-end and back-end writing methods leads to inefficient development, such as recompiling a style change, and the page will be very heavy.

CSR (Client Side Rendering) era

With Ajax technology and CDN cache of static resources, front-end SPA + CSR rendering has developed by leaps and leaps. In this mode, the front-end handles all logic, content filling and routing, and the data loading part is obtained from the back-end through Ajax, so the problem of division of labor development between the front and back ends is well solved. The specific request timeline can be seen in the following figure.

However, because the request is all asynchronous, one is not good for SEO, and the other is that HTML + JS processing data splicing is required to complete the rendering in the front end, the first screen will be white for a long time, especially in some low-end models experience is worrying.

SSR (Node) era

Later, with the development of the full stack technology led by Node, the front end returned to the original SSR road, but this return is a spiral rise.

First is the front and back side is full of JS syntax, most of the code is reusable, followed by the SEO friendly scenario, the service side rendering good returned directly after the final HTML, reduced the white during waiting time, asynchronous request too much lead to performance problems can be sent to the server address, also can effectively avoid multiple data acquisition, content fill, The browser binds only relevant JS logic and events. The specific request timeline can be seen in the following figure.

ESR (Edge Side Rendering) era

Behind with the development of margin calculation, due to the edge of the compute nodes user closer, have the advantage of shorter network latency, page activity can be split, the static content cached in CDN quickly returned to the user first, and then on the edge of computing nodes by dynamic content request, then the static content and dynamic part in the form of flow, Thus, the user’s first screen loading time is further improved, especially in the edge area or weak network environment can also have a good user experience, in addition to reduce the original SSR server pressure.

02 Edge rendering principles and advantages

As mentioned just now, edge rendering is to split the returned content into static + dynamic parts and return it in the form of stream with the help of edge computing power, and finally achieve faster rendering. Among them, the static part relies on CDN’s caching capability and is preferentially returned to the user, and then continues to initiate dynamic data requests on the edge computing node, and concatenates the static part and continues to stream back. Therefore, its advantages are also obvious:

  1. TTFB(Time To First Byte) is short: because static content is cached in the CDN, it is quickly returned To the user.
  2. FP(First Paint) is short: after the static content is returned, you can start parsing the HTML and downloading and executing the JS and CSS.
  3. FMP(First Meaningful Paint) is short: Because requests for dynamic content are initiated from edge computing nodes, the requests reduce TCP connection and network transport overhead compared to client-server direct connections, and because the dynamic parts are chunked back, the FMP is short, such as the first result of a search site being drawn first.

In general, compared with traditional center rendering, edge rendering has the advantages of wider node distribution and closer distance to users, allowing users to obtain website resources for rendering in a shorter time. Meanwhile, it can reduce the request pressure of center service, so as to achieve the effect of speeding up rendering and dispersing computing power.

03 Application Scenario Example

Scenario 1: Deploy the SSR service on an edge node, and the central service provides data interfaces

Directly move the SSR service to edge deployment, as shown in the following figure.

Scenario 2: The edge service reads the static HTML portion of the cache, and the central service provides the dynamic HTML

The SSR service is deployed in the center, and the edge stream returns HTML content (using HTTP Transfer-encoding: chunked block transmission mechanism). The static and dynamic parts need to be separated, as shown in the following figure.

  • Edge service: Request static HTML and return, while request central SSR service, get dynamic content and return
  • SSR service: Remove static HTML and return the dynamic part to edge service

For example,

Taking a Demo website as an example, the top navigation can be regarded as a static part cached in the edge CDN, while the card below is a dynamic part that goes back to the source to obtain data from the central service.

Through the comparison of Demo, it can be found that edge rendering (ESR) has obvious advantages over SSR. Its static top guide is drawn first, and the subsequent dynamic data is returned faster than SSR.

In addition, the advantages of edge rendering (ESR) are further demonstrated with the following buried point statistics.

04 Summary and Outlook

  • Technical implementation: Edge rendering (ESR) is suitable for scenes with high page rendering performance. Based on EDGE computing, the time of drawing the first screen is further optimized on the basis of SSR, and the waiting time of white screen is reduced.
  • Deployment mode: The current implementation mode mainly relies on edge RENDERING (ESR) service deployed by edge FaaS, which has the advantages of fast access, flexible expansion and shrinkage, low operation and maintenance cost, etc. In the later stage, edge function (edge JS runtime) deployment is provided. Users do not need to care about edge nodes, but only need to focus on the code itself, modify the code to upload and publish. Compared with Node service, JS runtime can provide higher operation efficiency;
  • Technical outlook: Edge rendering (ESR) is currently based on SSR, combined with edge computing performance improvement; In the future, the volcano Engine front-end team will combine functions and edge computing capabilities to conduct more explorations in the front-end Serverless deployment direction. Please look forward to those who are interested.