Open Pages Instantly Using SSR with Serverless

By Chen Jun, nicknamed Shuilan at Alibaba.

Today, the rendering performance of Rax SSR has been greatly improved. It is now six times better than React. In addition, Rax SSR supports serverless release in projects. For these reasons, it is about time that you learn about Rax SSR.

What Is SSR?

SSR is short for Server Side Rendering. As the name implies, SSR is a rendering process that is performed on a server.

The opposite of SSR is CSR, or Client Side Rendering. CSR is the conventional rendering mode used by web applications. In general, the initial HTML page is returned from the server and JavaScript (JS) loads data asynchronously to render the page.

The following figure shows the two different rendering methods and their page loading sequences for the same application.

As you can see from the above figure, in terms of content arrival time, SSR has a clear advantage, which is even more apparent in poor network environments.

Problems Facing SSR

However outstanding as it may be, SSR is not yet a common development mode of web applications. I think this is because of the relatively difficulty involved with building SSR applications. Consider this:

When you begin developing an SSR application, you essentially need to become a full-stack engineer, rather than just a frontend development engineer. In this development mode, the deliverable changes from a JS bundle to a Node application. As a result, you need to select a Node framework, build a Node application, and cope with performance overhead, and ensure application stability.
Furthermore, you need to run the existing frontend code to the server. Although mainstream frameworks like React provide the server with rendering capabilities, the variation in rendering principles and execution environments on the different sides leads to many differences in encoding. For example, if a window variable is called on the Node, an error will be reported. Asynchronous update mechanisms such as Hooks also cannot be used on the server.
Finally, after developing the application, you need to consider issues such as how to deploy the environment, how to balance the load, and how to cope with server downtime and user request peaks.

Therefore, although SSR delivers better performance than CSR, users prefer CSR due to the high development and maintenance costs of SSR.

Combination of SSR and Serverless

With the improvement of the serverless ecosystem in recent years, we have been considering if we can use the serverless format to revitalize SSR. After a great deal of study, we found that the answer is a definite yes.

On the one hand, with the help of Function as a Service (FaaS), a function can be transformed into a service without the need to build traditional Node applications. This allows developers to focus more on the business logic.

On the other hand, the function-based infrastructure and elastic mechanism of FaaS naturally empower SSR application with isolation and dynamic repair capabilities. This allows the applications to better avoid cross-page contamination or fatal damage caused by scenarios with abnormal boundaries.

Moreover, zero O&M, on-demand execution, auto scaling, and other features of FaaS greatly reduce the development difficulty of SSR applications.

Therefore, with the possibilities of Serverless and the efforts made by Rax in projects and SSR rendering engines, we can achieve a development experience that can rival that of CSR mode.

What Does Rax SSR Provide?

Here are some of the main features of Rax SSR:

Quick start with zero configuration: You can quickly create an SSR project using the Rax CLI tool, avoiding the need for complex configuration.

Superior rendering performance: Rax's server rendering engine uses a hybrid-rendering mode combining static templates and dynamic components. Its rendering performance is six times better than React.

-----------compare renderToString----------
React(16.12.0)#renderToString x 1,178 ops/sec ±1.23% (85 runs sampled)
Rax(1.1.1)#renderToString x 6,047 ops/sec ±1.73% (82 runs sampled)
Preact(10.2.1)#renderToString x 1,005 ops/sec ±1.10% (86 runs sampled)

The benchmark was run on:
   PLATFORM: linux 5.0.0-1027-azure
   CPU: Intel(R) Xeon(R) CPU E5-2673 v4 @ 2.30GHz
   SYSTEM MEMORY: 6.782737731933594GB
   NODE VERSION: v10.18.1

Benchmark address: https://github.com/raxjs/server-side-rendering-comparison
Serverless release mode: Rax projects support serverless release. They can be released to function hosting platforms such as Alibaba Cloud and Amazon Web Service (AWS) and can be integrated into traditional Node.js applications based on express and koa.

Take the Serverless hosting platform Now released in the community as an example. It does not have a complex application development and request process. In existing Rax projects, you can launch an SSR application with one click by developing a plug-in:

Performance Comparison

Here, we will consider a Rax SSR application that involves data requests. Performance comparison data shows that the first-screen rendering time of SSR is twice of that of CSR in Wi-Fi environments, and about 3.5 times faster than that of CSR in poor network environments.

Screen recording performance: (left: SSR; right: CSR)

SSR Demo address: https://rax-demo.now.sh/ssr/home

CSR Demo address: https://rax-demo.now.sh/csr/home

Are you eager to know the latest tech trends in Alibaba Cloud? Hear it from our top experts in our newly launched series, Tech Show!

Community

Open Pages Instantly Using SSR with Serverless

What Is SSR?

Problems Facing SSR

Combination of SSR and Serverless

What Does Rax SSR Provide?

Performance Comparison

Read previous post:

Read next post:

淘系技术

You may also like

Comments

淘系技术

Related Products

Auto Scaling

Server Load Balancer

Elastic High Performance Computing Solution

ECS(Elastic Compute Service)