React 16 performance: React 16, Next.js and Node 8.x LTS
(Edit: This article is a little bit outdated as there are new versions of libraries, but the core concepts still apply)
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,
reactis 5.3 kb (2.2 kb gzipped), down from 20.7 kb (6.9 kb gzipped).
react-domis 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 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:
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
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:
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.