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.

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.

While I like the concept of the guarantees of structure and validity, I do recognise that there’s a lot of overhead in how it works for constructing just a single view server side. This is why I decided to examine just how much overhead there is compared to more traditional templating engines that work on strings and don’t guarantee structure of the generated HTML markup.

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 static HTML. For Nunjucks and Pug I compiled the templates to reflect performance in production environments.

I placed the app on a single core VPS on UpCloud with Node.js (v9.2.0) and ran a set of benchmarks to get an idea of how the alternatives compare. For benchmarking I used another VPS with hey, a contemporary Apache Bench / Siege alternative written in Go to provide high load on…

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