The Performance Cost of Server Side Rendered React on Node.js

The Performance Cost of Server Side Rendered #reactjs on Node.js by @velmu

  • Note: After initial results I received feedback that I should define the environment variable NODE_ENV=production as this greatly improves performance of server side rendered React.
  • For throughput you can see that React is at a different league compared to the other templating engines when running without production settings, being close to ten times slower than the fastest traditional templating engine.
  • In production environment React performs again similarly to Nunjucks, but noticeably the average response time is significantly longer with the diffrence being some 70ms at concurrency of 250.
  • Like in throughput results, Pug performs close to ES6 template literals, but there is a consistent advantage in response times by the JavaScript native templating – some 12 percent at peak concurrency.
  • Throughput stabilises for both options from concurrency of 5 or more, but for high concurrencies the response time for uncompiled templates grows respectively more.

I like React as a templating engine, not only on the client side but on the server as well. Over the last year or two rendering templates with React.js on the server has become commonplace. Services from rather static content driven sites to Universal JavaScript Applications built on frameworks like Next.js are serving dynamic of server side rendered views using React.
Continue reading “The Performance Cost of Server Side Rendered React on Node.js”

The Performance Cost of Server Side Rendered React on Node.js

  • I created a simple Node.js application (Source on GitHub) with TypeScript that renders a HTML table of 100 rows of employee data from a JSON file with a number of different templating methods: – – For measure I threw in a simple Node HTTP server that dumped the content as…
  • I ran the benchmarks with concurrencies of 1, 5, 50, 100 and 250 and tracked throughput (requests / second) and the average response time (in Milliseconds of waiting for response).
  • Nunjucks scores second last, but beats React by a significant margin providing five times the throughput of ReactDOMServer on the latest Node.js (9.2.0) – – Native ES6 template literals and Pug are a close match, with Pug pulling ahead at a clear margin of 5 to 6 percent throughout the…
  • For the other libraries the average response times are consistent with throughput, although it seems that the native ECMAScript Template Literals provide a lower average response time, especially at high concurrencies; at 250 concurrent requests Pug takes an average of 81ms to respond, where native ES6 templates take around 40%…
  • Throughput stabilises for both options from concurrency of 5 or more, but for high concurrencies the response time for uncompiled templates grows respectively more.

It seems the original results for React.js have not been optimal, since the Node environment had not been set to production. In this env thus React does a lot of extra work under the hood. Thank you to Anatoli Papirovski for noticing this and the additional PR to further optimise performance.
Continue reading “The Performance Cost of Server Side Rendered React on Node.js”