Why Rax SSR Beats CSR: 6× Faster Rendering and Serverless Benefits

Recently Rax SSR achieved a 6× performance improvement over React and, with Serverless deployment, it is time to introduce Rax SSR.

What is SSR

SSR stands for Server Side Rendering, meaning the rendering work is performed on the server.

In contrast, CSR (Client Side Rendering) is the mainstream web rendering mode where the server returns an initial HTML page and JavaScript loads data asynchronously to render the page.

Image showing the load timeline of the same application rendered with the two methods.

(The orange part indicates page background time, i.e., the white‑screen duration.)

SSR’s advantage is evident in the time content becomes visible, especially under weak network conditions.

Challenges of SSR

Although SSR is excellent, it has not become mainstream because building SSR applications is not easy:

Developers become full‑stack engineers; the output changes from a JavaScript bundle to a Node application, requiring framework selection, performance handling, and stability guarantees.

Existing front‑end code must run on the server; differences in rendering principles and execution environments cause coding issues (e.g., using window on Node throws errors, Hooks behave differently on the server).

After development, deployment, load balancing, handling server failures, and traffic spikes must be addressed.

Therefore, despite SSR’s superior performance, its high development and maintenance costs push developers toward CSR.

Image illustrating these points.

SSR Meets Serverless

With the maturing Serverless ecosystem, we wonder whether Serverless can revitalize SSR. The answer is yes.

On one hand, Function‑as‑a‑Service lets a single function become a service, allowing developers to focus purely on business logic without building a traditional Node app.

On the other hand, FaaS provides isolation and dynamic recovery, reducing cross‑page contamination and mitigating boundary exceptions.

Additionally, no‑ops, on‑demand execution, and elastic scaling lower the entry barrier for SSR developers.

Thus, combined with Serverless and Rax's engineering work, we can achieve a development experience comparable to CSR.

What Rax SSR Brings

Key points for a quick understanding:

Zero‑Configuration Start

Using Rax CLI, you can quickly create an SSR project without complex configuration.

Extreme Rendering Performance

Rax's server rendering engine uses a hybrid static‑template + dynamic‑component model, delivering performance six times that of React.

-----------compare renderToString----------
React(16.12)#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-1027-azure
   CPU: Intel(R) Xeon(R) CPU E5-2673 v4 @ 2.30GHz
   SYSTEM MEMORY: 6.782737731933594GB
   NODE VERSION: v10.18.1

Benchmark repository: https://github.com/raxjs/server-side-rendering-comparison

Serverless Deployment Model

Rax supports Serverless deployment to platforms such as Alibaba Cloud, AWS, or integration with traditional Express/Koa Node applications.

Example: publishing to the Now platform requires only a plugin extension to launch an SSR app with one click.

Performance Comparison

In a real Rax SSR application with data requests, tests show that on Wi‑Fi, SSR’s first‑paint time is twice as fast as CSR; on weak networks, SSR is about 3.5 times faster.

Screen capture (left: SSR; right: CSR).

SSR demo: https://rax-demo.now.sh/ssr/home CSR demo: https://rax-demo.now.sh/csr/home

Start Your SSR Journey

Visit https://rax.js.org/ssr