Is React the best choice for an e-commerce site?

React is a frontend framework increasingly used today to build e-commerce sites. In recent years the trend has been to build e-commerce sites as Single Page Applications, and React is one of the options when it comes to frameworks for achieving that.

When it comes to architecture, the easy choice is often to look at what competitors and friends choose and go the same way. If the choice you are making is not business-critical, or if you do not have time to dig into the alternatives, that can be a fairly good approach, but the risk is that you pick a solution others chose with completely different conditions than yours.

It is also easy to think there are silver bullets, options without downsides that solve all your problems. But when it comes to technology and architecture there is no right way, there are only different types of compromise. Every path comes with its own set of pros and cons. A competitor may have made a certain technical choice based on history or existing staff, things that probably do not apply to you. Not infrequently, tech choices are made based on "Google and Netflix did it this way, so we should too". But Google and Netflix have thousands of developers and completely different conditions and challenges than you have.

React's advantages

The absolute biggest advantage of React today is that it is so popular, and finding skills is not a major challenge. If you have your own developers it is fairly likely they already have experience of React.

Another big advantage is React Native , which is a framework for creating mobile apps with React. It allows you to have the same developers who work on the site also work on apps without having to learn every detail of iOS and Android.

The ecosystem around React has grown enormously, and there are third-party components for most problems you can have. If you need, for example, an image gallery or tabs to show and hide content, there are very many options to choose from.

Perhaps the biggest positive effect of React being built by Facebook is that they take backwards compatibility very seriously. Because it would have cost them so much to make big changes, they have been very good over the years at making sure code using React will keep working after an upgrade. This means a lower cost for you in keeping up with new React versions.

Even though the ecosystem is large and wild, some things stand out as very positive, and one of them is Next.js. Next.js is a framework on top of React you can use to build sites, not least e-commerce sites. Next.js is not unique to React, there is for example Nuxt.js which is a similar framework for Vue.js. What stands out with Next.js a little is that it has strong momentum and is not just an open source tool. The team behind Next.js has also collaborated a lot with the Google Chrome team to make sure the base performance in Next.js is as good as possible.

React's disadvantages

React has become so popular that its large ecosystem is not just a positive. There are many options and it is hard to judge whether those options are really good.

Before choosing React you need to understand what drives its development and which problems it focuses on solving. React is built by Facebook and driven entirely by developers employed by Facebook. It is open source so it is free for anyone to contribute, but the reality is that React's future is steered entirely by the challenges Facebook themselves have. That is not negative in itself, but it is not obvious that you have the same challenges as Facebook. It is actually fairly unlikely that you do. Facebook.com is very different from an average e-commerce site. In recent years the React team has spent a lot of time and energy solving complex interface problems when many things are updated at once on screen and how those updates should be synchronised. Which is definitely a problem Facebook has, but there are very few e-commerce sites with interfaces so complex that it matters.

Superficially at least, fairly little has happened with React in recent years. When other frameworks announce important new features regularly, it is comparatively quiet from React. This is largely because the React team has chosen to prioritise backwards compatibility over regularly bringing new functionality. If you have a smaller code base and depend on always being at the cutting edge of new functionality, React can be the wrong choice.

PageSpeed and initial performance

For an e-commerce site, the performance of the initial page load is perhaps the most important technical challenge you have. Those who go on facebook.com care rather little if it takes an extra second to load the homepage because they will spend a long time there reading and posting content. Many e-commerce operators would love to have as long a session time as facebook.com, but that is not the case. For e-commerce, the initial page load is extremely important. We all know how quickly we abandon an e-commerce site if we do not get a really good first impression.

It is far from impossible to create a good first page load with React, but you need to understand that neither React nor the ecosystem around React has that as a strong driver. React comes, as mentioned, with a number of pros and a number of cons. This is a con you have to work quite hard yourself to get around.

The biggest factor today for a fast first page load and how good a score you get on Google PageSpeed is the amount of JavaScript your site has. The more JavaScript you have, the longer it takes to download and execute, which gives poorer performance and PageSpeed score.

React itself is significantly larger than many of the alternatives, and the React team has chosen to focus more on other challenges rather than reducing that size. Which is entirely the right compromise for facebook.com, but perhaps not the compromise that is right for you.

So when should I choose React?

When you look at your options, you should first and foremost not see the ecosystem around React as a big advantage. The reality is that you will not be able to use many third-party components if you are going to achieve the initial performance you need. To achieve that, you only have a certain budget for how much JavaScript you can use, and React itself will take up a fairly large chunk of it. That does not leave much room to bring in third-party components that are often not written with size as a goal.

There are a couple of big reasons to choose React. If you have the ambition to build mobile apps with the same team and skills that build your site, React Native is a strong reason. But React Native is not the only option, so you should not choose React solely because you want to build mobile apps at some point.

If you have a large team of developers and a large, complex e-commerce site, you will also appreciate how seriously React takes backwards compatibility. You want to invest in your own solution, not invest in the changes required to upgrade your frontend framework.

But the biggest reason is access to skills. If you have a team that already knows and wants to use React, it is better to let that team focus on handling the challenges than to choose a less popular option and spend time and money learning it. If you have a team that prefers Vue.js, or you think it seems easier to find skills around Vue.js, then that is a much more important parameter than the difference between React and Vue, or Next and Nuxt.

Whatever you choose, the journey does not end with that decision. Performance is something you have to work with all the time, and it is entirely possible to create both a super-fast and a super-slow site with or without React. Every technical decision you make has to include performance, otherwise it is easy to end up in death by a thousand papercuts and with a solution that is hard to rescue.