Reactive Stack

Top 5 Trends in 2021 for React Developers

Cover Image for Top 5 Trends in 2021 for React Developers
Benoit Tremblay
Benoit Tremblay

Have you ever found staying up-to-date in the React ecosystem a challenge? There are so many new things popping left and right that it can be easy to feel outdated very quickly. The truth is most of that is just noise and only a few of them are needle movers. Let me share with you the top 5 trends that will definitively grow in 2021 and that you should give more attention.

Static Site Generated (SSG)

It might not be a new trend, but it will certainly keep growing within the React community. Generating your Website and serving it as static HTML has a lot of pros. For starter, if Search Engine Optimization (SSO) is important to you because you want the Website to rank good with Google, SSG is an easy way to get a boost because client-side apps don't rank nearly as good as those with plain HTML. It is often a good reason not to use React and sometimes it is the best solution. If having an interactive user experience is important to you, but you still want the good ranking for SSO, SSG will grow in popularity in 2021 for sure. It allows you to generate the pages at the build time and serve them as HTML first. Then, when the client loads the page, the React app can take over. It can also be done with Server-Side Rendering (SSR). However, that has a performance cost because the HTML gets generated at runtime instead of build time.

One additional benefit of SSG is being able to serve your app from a CDN without a server. All you need is a rewrite rule that strip the .html and serve a 404 page, and you're good to go. You don't even need a server behind that! Performance and loading speed should be something high in your priorities. A CDN give you that out of the box without all the hassle of the infrastructure you would typically need.

The two major players in this field within React are Next.js and Gatsby.js. If you never tried them yet, building a simple dummy app with them should be one of your 2021 goal. You also have to know the pros and cons of each one of them. They are no silver bullet and a lot of the time you will not need them, but when you do you will be thankful you learned about them beforehand.

Next.js - Hybrid static & server rendering, TypeScript support, smart bundling, route pre-fetching, and more

Next.js claims to be a hybrid static & server rendering. They support TypeScript and all other tools you could use with Webpack. One large benefit is how easy it is to get started because you don't need any configuration (hello my 500+ lines Webpack config from 2016, I don't miss you 🤣). It comes with a bunch of optimized tools out of the box including pre-fetching routes. Because they have a built-in router, it will make sure to load a page data before the user clicked on a link making the experience seems much quicker than what it really is. You can export static sites with Next, but you can also do server rendering if your data has to be live. Your static site can also have a fallback to generate the page on runtime if it does not exist. When you have a large dataset, it is interesting to keep the server generate the HTML at runtime for the first user accessing it. After that, it will be kept in a cache and reused without the overhead of building it at runtime.

You can host it anywhere you want, but the easiest road is to use Vercel hosting, made by the creator of Next. The setup is super easy and you don't need to take care of the infrastructure behind it. They know how to make a Next project run and it will be super optimized. They also have a ton of other feature including internationalization, analytics, image optimization, API routes and much more. You should definitively check out the getting started tutorial.

Gatsby.js - Create blazing fast websites and apps AND harness the power of 2000+ plugins

Gatsby.js on the other hand is a pure static site generator. What makes this one appealing is the broad plugin ecosystem it has with over 2000 plugins you can use. It will especially shine if you want to use a CMS with it like WordPress, Drupal or any major one. The plugin integration make it super easy to build your frontend and connect with the CMS API through the GraphQL API Gatsby is proving you. That API is not meant to be used by the user, but rather by the build tools when you are ready to publish your work.

They also offer a hosting solution with Gatsby Cloud. If you don't want the overhead of building the app every time someone makes a change in the CMS, this is a very good way to go to make your life easier. Especially if it is managed by a non-technical person. You can get started by going through the tutorial.

React Server Components

A nice surprise announcement by the React team at the end of 2020. This is still experimental and nothing has been released or even planned to be released soon. However, when this will be released, you can expect this to be a major game changer. The React Server Components are components that you can run directly on the server instead of the browser and it has two big benefits.

Benefit #1 - Reduce The Bundle Size

Your components could be split into two kind. One kind is the static component. It does not have any user interaction and it is only visual. The other kind is an interactive component. It can be reacting based on a click, on a submit, a scroll, anything that can happen after the initial render and is not controlled by the app. While the interactive components have to be in the browser, the static components certainly don't. What the server components will allow you to do is split your components into client and server components. When the client will load the page, the server will take care of rendering the server component in HTML. Those will not be included within your React app served to the browser. That way, your bundle size will be reduced because not only you will not include static components, but you will also exclude libraries that only the server components use.

Benefit #2 - Speed Up The First Meaningful Paint (FMP)

The second major issue the server components will solve is the speed of the First Meaningful Paint (FMP). That paint is when the main content of the page is loaded. The biggest bottleneck for the FMP when using React is caused by the browser loading the bundle, calling the API, process the response and show it to the user. All of that can pile up pretty fast. But you're not done yet. After the first data is loaded, maybe you need more information based on the response. For example, you could be fetching categories and then for each category fetch the items using the category ID. This is known as the waterfall problem, we need to wait for the end of one query to send another query because we are missing some information. Because each round trip to the server are expensive on the browser, this is going to be slow. What if instead of fetching the data from the browser, we were calling the API from the server? This would be a lot faster because internal call between your services can be significantly faster than the browser. GraphQL + Relay was one known solution to that problem, but many people don't want to use it for various good reasons including too much overhead to implement for a small team.

By having server components, we can also move data fetching to the server and use that information even before the client bundle is loaded. It was possible before by using server rendering but it is not simple. You have to collect all the API calls the user needs (it can get complex) and when you are done, you have to rehydrate your data on the client. It means that you had to pass that data not only to the components on the server but you also have to put them in a global variable on the page to pass back that data to the client. The payload of the page can go up by more than 50% sometimes because of that. When server components will be ready, React will be a first-class citizen on the server and most of the overhead will be removed.

We don't know yet when this is going to be ready, but you can be sure it will be on the spotlight in 2021. For now, you can go watch the presentation the React team has done as well as check the note app demo they built.

Hooks Will Continue To Take Over

Hooks have beeen released 2 years ago and yet a shocking amount of React developers have not mastered them. When building new components on your apps, hooks should always be prefered over class components because they are the way forward. Switching is super easy because you can mix them up and all libraries are supporting them for a while now.

Using hooks allows you to make your code much much cleaner by replacing the confusing life-cycle methods of class components by a much more clean and easy to understand way. It will be confusing at first, but trust me it is just a transition phase until you changed your mindset.

To get started, read the React documentation on hooks is a good start, but I would encourage you to learn more by watching a course and building a demo app of your choice. My favorite course is Simplify React Apps with React Hooks by Ken C. Dodds and it only takes 38 minutes to watch. Well worth your time.

Test Like A Human

Testing always been critical to make sure your app still work as expected and doesn't have a bug while you are new features. In the past, it has evolved a lot around mocking and shallow rendering. With the rise of the popularity of great tools such as React Testing Library, it has never been easier to simulate user interactions and make sure the desired result is displayed just like a user would know: by looking at the content of the page. When building an API, it is important to test like a computer, but React is meant to talk with humans. With the JSDOM it is possible to run tests as quickly as if they were unit tests. Speed has not been an issue with React. If you never tested your components, it's time to learn in 2021 starting with the React Testing Library documentation.

Accessibility Will Keep Raising

Making your page accessible is not a requirement, but we all know it is the right thing to do. However, it also has a lot of hidden benefits. Testing like a human brings a few challenge including how to target elements on the page. When navigating the page in your test, you can use the accessibility role to help find what you need and it has the awesome benefit of improving the accessibility of your app. Not only will you find it easier to test your app but it will also improve the accessibility score. It's a win-win for everybody.

If you want to go beyond that, many tools are there to help detect accessibility issues like React Axe and spot quickly easy to fix problems.

Happy 2021!

I wish you a happy 2021 and might the gods of React be with you!

Want More Content About React.js?
Subscribe to Our Newsletter

* indicates required

We will never spam you.