Front-end frameworks and build tools for React in 2023

In 2023, there are lots of front-end frameworks such as React, Vue, Svelte, Angular, etc.

In addition to that, there are many ways to develop with React apps alone, including Next.js, Remix, Gatsby, Expo, Vite, and Create React App (CRA), among others.

Web front-end technology tends to update relatively quickly, so it is not uncommon for a text from a few years ago to be outdated.

I have been involved in web front-end development for about five years, and there have been many changes in the web front-end technology we use in just five years.

In this article, I would like to share my opinion on what is the best way to build a React app in 2023.

Creact React App（CRA）

Creact React App（CRA）is the official React tool for creating a React app, as its name suggests.

It was a great tool to start developing a React app.

However, unfortunately, it is no longer officially recommended in 2023.

https://react.dev/learn/start-a-new-react-project

Now, the React team recommends using some of the React-powered framework to build a React app.

In addition, their last release was 2022, which means it is not actively maintained now.

So it would be a wise decision to use some of the frameworks like Next.js or Remix.

I suggest you read the following to understand why it is no longer officially recommended.

https://github.com/reactjs/react.dev/pull/5487#issuecomment-1409720741

Next.js

Next.js is a React framework by Vercel. it's designed for building full-stack web applications.

I have been using Next.js since 2019. I still believe Next.js is the best option in 2023.

Reasons for my opinion are as follows:

Actively maintained and updated
Optimized for performance and ease of use
Can be used for static site generation, server-side rendering, and various other patterns
Strong community and large number of users

I remember that before Next.js was released, React developers had to do a lot of configuration, including page routing, server-side rendering, image size, cache config, build config, and optimization. Now I feel I can concentrate more on development and less on such configuration issues.

Next.js has been updated continuously. As it has continued to get updated over the years, it became more and more useful. For example, static page generation has been supported since v9, internationalization (i18n) routing has been supported since v10, and in 2023, App Router and Server Components were introduced to optimize rendering performance.

In addition, a variety of tools and libraries for Next.js have been released by third-party and community developers. For example, the Sentry monitoring platform has an SDK designed specifically for Next.js.

Also, the number of users and the number of companies that have used it make it easy to troubleshoot problems and recommend it to beginners.

I have been using Next.js since 2019, and I have the impression that it is so stable, with very few troubles caused by the framework.

As a result, I can easily recommend it to anyone.

There was a major update in 2023 with the introduction of App Router, and Pages Router is still supported. Which one to use depends on the project, but in general I recommend App Router if you like to try new features and need performance, and Pages Router if you like stability.

Remix

Remix is a full-stack web framework based on React, maintained by Shopify team. It is a relatively new framework.

It is similar to Next.js in that it is for a full-stack web application, but their differences are as follows:

Server-side rendering framework
Very efficient rendering performance
Respect for the web standards

Recently, React development teams have focused more on server-side optimizations, such as React Server Components, to further improve performance. Remix is a framework that specializes in server-side functionality and was one of the first frameworks to focus on improving server-side performance.

Remix is also designed to comply with web standards and reduce the learning curve of the framework itself.

I tried it a few months ago and found it to be very easy to understand and use. Also, it would be easy to migrate and easy to develop if you have used React before.

However, in my opinion, it is a bit early to use it in a production environment at this time. Especially if stability is a must.

There are several reasons for this, but the short answer is that support from the development team, the community, and third parties is still weak compared to Next.js, and there are concerns that the libraries and other support will be inadequate for long-term use.

For example, I needed i18n support for a Remix application, but there was no official documentation and only one i18n library for Remix.

With Next.js, i18n support is officially documented and there are multiple libraries to choose from, making long-term use more assured.

Also, in 2023, the Next.js team released a feature called App Router that allows for performance optimization with React Server components, so I think it would be a good idea to try that.

However, It's still a nice full-stack web framework that supports React's latest features. So it might be a good idea to use Remix for small projects.

Vite

Vite is a build tool that supports multiple web front-end development frameworks, including React, Vue, and Svelte.

Now that CRA has been deprecated, Vite is one way to get started without a React framework.

In conclusion, I do not recommend it. The reason is that you will need to do complicated optimization yourself, as described below.

https://nextjs.org/docs/app/building-your-application/upgrading/from-vite

While recent React development teams are focusing more on server-side optimizations such as React Server Components, Vite as of 2023 will use traditional client-side React by default, and you will need to set up additional configuration if you want to support server-side rendering (SSR).

I think it is better to go with Next.js and Remix optimization for now.

Expo

Expo is a React Native based framework, also it is a platform to build native apps. It is mainly used for native Android, iOS apps.

React Native is known for developing iOS/Android apps, but in fact, you can also develop web apps with Expo.

https://docs.expo.dev/workflow/web/

This means you can build Web/iOS/Android apps using only Expo. I have developed several iOS/Android applications using Expo. One of them supports the web.

This sounds great, but you have to learn something specific to React Native if you want to use Expo.

Also, Sometimes it was sometimes difficult to keep the styling consistent and control the same behavior across multiple platforms.

So I recommend other React frameworks if you only want to develop web apps.

But if you are a React developer and also want to develop native Android/iOS apps, then Expo might be an option to choose.

Gatsby

Gatsby is a React framework and seems to be more specialized for use with CMSs like Wordpress.

It used to focus on static site generation (SSG), but now supports server-side rendering (SSR) as well.

Until a few years ago, I used Gatsby and its static site generation feature to build blogs and landing pages, but since Next.js started supporting static site generation, I have had much less occasion to touch it.

Unfortunately, I can't think of much reason to use Gatsby right now, as I feel it is losing ground to Next.js in terms of features, community, and user base.

Many people would prefer to choose the more usable one if there are two similar frameworks available.

Conclusion

Need stable: Next.js
Large projects: Next.js
Small projects: Remix or Next.js
iOS/Android apps: Expo
Not sure what to do: Next.js

FYI: https://npmtrends.com/create-react-app-vs-expo-vs-gatsby-vs-next-vs-remix

Qlawmarq on the net