React 16 performance: React 16, Next.js and Node 8.x LTS

It is a really exciting time to be part of the Javascript community as several key developments have come out in the last few months. The React 16 (fiber) has been released; long-term support for Node.js LTS has been added to version 8; and the Next.js framework for server-side rendered React apps has come to version 4, and is intended for use with React 16.

In this brief article we will go through some of the key latest improvements in React, Next.js and Node.js. These improvements are all related, as Next.js is the framework for server-side rendered React apps; React 16 has massive improvements on server-side rendering, and performs much better if you use the latest versions of Node.js. In my opinion, this is a very important step for the Javascript community. The popularity of the Next.js framework is rising, and now with the availability of long term support for Node 8.x we can really use the latest version of Node.js in production apps. In this brief article we will go through some of the key latest improvements of React.js, Next.js and Node.js, and for those who want to have a quick start we will also introduce my high performance starter kit.

React 15 vs React 16

Some of these key improvements are:

  • Render does not need to have only one component in return. It can also return arrays of components or even pure strings. Check out the React 16 announcement.
  • The file size of react and react-dom is now reduced significantly. According to the official blog post,
react is 5.3 kb (2.2 kb gzipped), down from 20.7 kb (6.9 kb gzipped).
react-dom is 103.7 kb (32.6 kb gzipped), down from 141 kb (42.9 kb gzipped).
  • React relicensed as MIT.
  • Improved performance of server-side rendering. See article on the React 16 server-side rendering here.
  • React 16 supports streaming.
  • Error boundaries and portals (not available while using server-side rendering)
  • Support for custom DOM attributes
  • New core architecture of React (now known by the codename Fiber)
  • Async rendering

Even though React is not the fastest library for rendering UI. I use it for its ecosystem and support from Facebook. If you would really like to go deeper into performance or you do not want to use React for some other reason, you can check out Vue Js with the Nuxt.js framework, for example, as a nice alternative to React + Next.js. It is also interesting to compare performance differences between React/Vue.js and Next.js/Nuxt.js.

Next.js 4

Next.js has many great features out of the box without additional boiler plates, such as:

  • server-side rendering
  • automatic code splitting
  • routing based on the “pages” folder
  • prefetching components
  • webpack config customization
  • babel config customization
  • static HTML export
  • improved SEO

You can check it out on its official gitHub repository. These were the parts of the previous versions of Next.js. The key feature of Next.js version 4 is the added support for React 16. Next.js is a framework for server-side rendering. Server-side rendering is also one of the key improvements in React 16, and we can therefore gain huge performance benefits from it. According to the news of the official Next JS page we are dealing with 2.6x improvement in terms of the number of requests per second when we switch to Next.js version 4. In addition, styled jsx 2 has been released. In the past, I have used various alternatives to css in js styling like fela or styletron. After the new styled jsx 2, however, I switched to styled jsx styles. According to this benchmark, when you use Next.js they are faster. Another advantage is that styled jsx styles do not require any additional setup.

Node JS 8.x becomes LTS

The new LTS version of Node.js is coded as Carbon. The whole v 8.x line has now moved into the active LTS. Some of the key differences between the last LTS, which was 6.x (Boron) and 8.x (Carbon) are:

  • Default npmmoved to version 5.x, where performance is also significantly improved as stated here.
  • The V8 5.8 engine now accompanies Node.js. It is guaranteed that 5.8 has forward ABI compatability with V8 5.9 and V8 6, which helps a lot for future stability of the Node.js ecosystem.
  • There are a lot of ES6/7 features supported by Node.js by default without the need to install various babel plugins.
  • Huge improvements in performance. Check out this article to go deeper into this topic. The Node.js 8.x is faster in server rendering time and has about third faster npm.

This article describes the changes in greater detail. Even at the time of writing, there are some newer 9.x versions of Node.js. I would highly recommend to use the LTS version as it is much more stable release.

Starter kit to implement it all

How can we push it even further? The answer is to manage the state with Apollo 2.0 and use GraphQL as the language for your API. This will be the topic of the next article in my series on high performance web applications. Just make sure that you use at least the 8.x version of Node. You can manage your Node versions with tools like nvm or n. However, if you are ready to create high performance web right now, you can clone this repository with the following command:

git clone https://github.com/a7v8x/high-performance-starter-kit.git

and follow the readme to start creating high performance web applications as quickly as possible.

Did you like this post? Then clap for this article as it is easier for others to find it. The high performance starter kit can be cloned from this GitHub repository.