React, etc. Tech Stack

React, Flux, GraphQL, Hack, HHVM...? All of this and more!

React SSR Benchmarks on Node.js

React can be rendered on in the Browsers DOM, but also on the server using ReactDOMServer, a library that emulates the DOM in the popular Node.js environment. This can be used to improve first load performance, but the process of rendering React is not simple compared to traditional string based templates.

Now there have been published some benchmarks detailing how much slower React.js Server Side Rendering (SSR) is compared to traditional templates. In the test it seems that compared to the Node.js Pug template library React SSR is over ten times slower: 

This is of course completely dynamic rendering that is not required in many cases when running Media sites like the Economist or other sites which use a GraphQL or RESTful API together with a Universal JavaScript framework like Next.js to split the work between the server and the client.

In any case since React.js rendering is much slower in the tests compared to Pug, Nunjucks and ECMAScript Template Literals, by a considerable margin it is recommended in the article to use Cloudflare or a similar proxy cache service to lighten the load of your React SSR rendering servers or serverless functions:

However, for high load services where React is primarily used for rendering content feeds or similar non-dynamic content to HTML setting up traditional HTTP caching is advisable. While scaling rendering nodes horizontally is not complicated, but the fastest work is the work that need not be done.
-- The Performance Cost of Server Side Rendered React on Node.js

Written by Jorgé on Sunday November 19, 2017

Permalink -

« ES6 template literals: lit-html vs. VDOM templating - Benchmarking HTTP/2 »