Popular React Framework Choices to Develop React Apps in 2023

Some time ago Andrew Clark, one of the members of the React core team at that time, posted a thread on Twitter starting with such a phrase:

https://twitter.com/acdlite/status/1617611126514266112?embedable=true

Approximately at the same time Dan Abramov, another React core team member, wrote such a post in a comment to a PR suggesting Vite as a replacement for CRA.

It felt like something serious was going on as for many developers for years the strategy to use React has been the following:

1. Create a new app using CRA (maybe lately using Vite).
2. Add libraries of choice to make your life easier.
3. PROFIT.

Obviously, it wouldn’t work if you had requirements to have SSR, code-splitting, etc. But it's been a good starting point for an app and in some cases, the app might've used CRA for years as a kind of framework.

So, what are React frameworks (also, referred to as React meta-frameworks)?

They are the tools that are built on top of React, where a lot of pain points have been taken care of for you and they have lots of features that might improve the DX and performance of the app.

In this article, we'll compare and contrast the most popular React frameworks to help you decide which one is best suited for your future project.

I wanted to start from the list mentioned in another post by Andrew Clark:

https://twitter.com/acdlite/status/1617611129282527232?embedable=true

1. Next.js

The first one on the list is Next.js (though Andrew might be a little biased as he recently joined Vercel, the cloud-based platform for deploying and scaling web applications behind Next.js).

The framework has 4,125,745 weekly downloads. The initial version was released in October 2016, making it around 7 years old as of 2023.

Some main features of Next.js are:

1. Server-side rendering (SSR) and Static Site Generation (SSG): Next.js supports server-side rendering and static site generation out-of-the-box, allowing developers to render pages on the server-side for better performance and SEO, or generate static sites with dynamic data fetching. To do that you simply need to export either export the getServerSideProps function or the getStaticProps one.
2. Automatic code splitting: Each file inside your pages/ directory will be automatically code split into its own JavaScript bundle during the build step, meaning for you that every page will require less code to load.
3. Built-in CSS support: Next.js supports CSS modules, Sass, PostCSS, and CSS-in-JS libraries.
4. Zero Configuration: Next.js comes with built-in configurations that handle the most common web development use cases, allowing developers to focus on building their app logic rather than setting up tooling.
5. TypeScript support: Next.js natively supports TypeScript, which offers strong typing, easier debugging, and better code quality.
6. Image optimization: Next.js optimizes images automatically, reducing their size without any loss in image quality.
7. API Routes: Next.js provides API routes out-of-the-box, making it easy to create the backend functionality for your application in case you need it.
8. File-based routing: Next.js supports file-based routing, which means developers can create new pages and routes for them by simply adding a new file to the pages directory. The concept of pages also supports nested routes and dynamic route segments.
9. Incremental Static Regeneration (ISR): Next.js supports ISR, which allows for pages to be re-generated incrementally in the background, providing the most up-to-date content while still maintaining fast page load times.
10. Vercel Integration: Next.js has native integration with Vercel, a cloud-based platform for deploying static and serverless applications, which allows for seamless deployment and scaling of your application. Also, it's free for personal or non-commercial projects. Though you can deploy your app anywhere where Node.js is supported as basically a Next.js app is still a Node.js app.
11. Preview Mode: Next.js supports the preview mode, which allows content editors to preview changes in real-time before publishing.
12. Internationalization: Next.js has built-in support for internationalization (i18n), which allows developers to create multi-language pages easily.
13. Rust-based tooling: From Next.js Compiler to Turbopack, Rust-based tools are used in Next.js heavily to provide developers with faster DX.
14. Client-side navigation: Next.js provides client-side navigation using the Next.js Link component, which provides a smooth and seamless user experience.

The subjective cons are:

1. Learning curve: I mean the docs are great, but you need to study them in order to be able to build stuff.
2. Some things are opinionated, e.g. file-based routing, etc. It's not exactly bad, but there is a chance you'll want to do something differently, but won't be able to do so.
3. You'll need Node.js support on your server to get the most out of it. Though it's possible to export your app as static HTML/CSS/JS so that you can host it on any web server that can serve static assets.

All in all, Next.js provides you with everything you might need to build a web app. Obviously, the main focus is websites/"googleable" web apps, but you can build a client-only app (aka SPA) as well.

2. Remix

The second framework in the list is Remix. Remix was introduced in December 2020 by the team at Remix Software, led by Michael Jackson and Ryan Florence. It is a relatively new framework, but it has gained a lot of attention and popularity among developers due to its unique approach to server-side rendering and data management compared to other React frameworks.

The main features are:

1. Server-side rendering (SSR): to be fair everything in Remix is SSR, so there is no choice in how you want to render your app. It's part of the philosophy.
2. Incremental hydration: Remix uses incremental hydration, which allows for a faster and smoother user experience by updating only the necessary parts of the page when changes occur.
3. Automatic code splitting: Remix automatically splits code into smaller chunks for better performance and faster load times.
4. File-based routing: Similar to Next.js Remix allows developers to create pages by simply adding a new file to the pages directory, making it easy to organize and manage pages. Additionally, nested routes are supported.
5. Full-stack data management: Remix provides a unified approach to data management, allowing developers to manage both client-side and server-side data in a single API.
6. Pre-rendering and rehydration hooks: Remix provides hooks for pre-rendering and rehydration, allowing developers to control the rendering and hydration of their applications.
7. Forms and validation: Remix provides a simple and flexible API for working with forms, including built-in validation and error handling.
8. esbuild-based tooling, meaning everything is fast.
9. Stacks: Basically, stacks are sets of all the configs you need to start developing and to be able to deploy your app to your favorite cloud provider.
10. Built-in CSS support: Remix supports many of the CSS frameworks out of the box, though it has its limitations as the team suggests you either use route-based styles or Tailwind.
11. TypeScript support: Remix natively supports TypeScript.
12. The philosophy in general is to embrace web standards, not fight them. Cons:
13. Learning curve: the same thing that applies to Next.js. You need to read lots of docs to get comfortable with your Remix project.
14. Opinionated: to be fair the philosophy of Remix reminded me of something from the times when we had to use PHP / Ruby on Rails, etc. This is not bad, it's just different.
15. It's easy to make a mistake when both server-side and client-side code is in one place: https://remix.run/docs/en/1.14.3/guides/constraints#rendering-with-browser-only-apis
16. You'll need Node.js support on your server.

The Remix team has been actively promoting their product. E.g. here is a comparison between Next.js and Remix (where Remix is slightly better in the end, of course). In my opinion, it is a great tool, but its approaches are a bit different from the approaches the Front End world got used to.

3. Gatsby

The next framework was not mentioned in the post by Andrew Clark, yet I personally wanted to include it here. It was introduced in 2015 by Kyle Mathews. Initially, Gatsby posed as a static website generator, now it's way more than that.

Here are some of the features of Gatsby:

1. Rendering options: Gatsby is historically known as a static site generator enhanced with React Hydration. But starting with Gatsby 4, you can choose alternative rendering options (Deferred Static generation (DSG) or SSR) in addition to static site generation (SSG) — on a per-page basis.
2. Built-in GraphQL: Gatsby includes a built-in GraphQL data layer, making it easy to fetch and manage data from multiple sources, including APIs, CMSs, and databases.
3. Progressive web apps (PWAs): Gatsby makes it easy to build progressive web apps (PWAs) that work offline and can be installed on mobile devices.
4. Image optimization: Gatsby provides built-in tools for optimizing and processing images, including support for lazy loading and responsive images.
5. Code splitting: Gatsby automatically splits code into smaller chunks for faster load times and better performance.
6. Plugins and themes: Gatsby supports plugins and themes, making it easy to extend and customize the framework.
7. SEO optimization: Gatsby includes built-in support for SEO optimization, including automatic generation of meta tags, sitemaps, and social media sharing images.
8. Content mesh: Gatsby provides a content mesh feature that enables developers to combine data from multiple sources, including headless CMSs, APIs, and databases.
9. Incremental builds: Gatsby allows developers to build incrementally, which means that only the necessary parts of the site are rebuilt when changes are made, making the build process faster.
10. Integration with Gatsby Cloud, which allows you to use Serverless functions, Live Preview, CMS Preview, and host your app build with Gatsby.
11. Using SSG you can avoid having Node.js on the server which means there are fewer things that can get broken on production.
12. [File-based routing] Gatsby supports file-based routing allowing you to configure routes the way you need.

The Cons:

1. Learning curve: again, it's not just React anymore and reading docs is a crucial part of your success with Gatsby.
2. Opinionated: even after ~2 years of using Gatsby in production I'm still not sure about several aspects of Gatsby's philosophy, e.g. the GraphQL data layer is a little bit questionable for me. Though if you want, you can query data without GraphQL.
3. You'll need Node.js support on your server in case you want to use any of the rendering options apart from SSG.

If you're interested to hear about my personal experience with Gatsby, here's my talk about it (in Russian). In general, I think that Gatsby is very nice to build a modern web app. Recently, Gatsby has joined Netlify, a cloud computing platform, which means that in the future we can expect a deeper integration with them.

4. Expo

The last framework from the list is Expo, which is a React Native framework, which means it does a different job, but still is a meta framework within the React ecosystem. Plus, it's possible to develop web apps using it.

The main features are:

1. Cross-platform development: Expo allows developers to build and deploy mobile applications for iOS, Android, and the web from a single codebase, using React Native.
2. Built-in components and libraries: Expo includes a variety of pre-built components and libraries, including UI components, navigation, and authentication, that make it easier to build mobile apps.
3. Live reloading: Expo provides live reloading just like a normal React dev environment nowadays, which is rare.
4. Push notifications: Expo includes built-in support for push notifications, making it easy to send notifications to users of your app.
5. Secure storage: Expo provides secure storage for sensitive data, including user credentials and authentication tokens.
6. Sensible defaults: Expo sets sensible defaults for common settings and configurations, making it easier for developers to get started quickly.
7. Easy deployment: Expo provides a simple and easy deployment process, allowing developers to deploy their apps to the App Store and Google Play Store with minimal effort.
8. OTA updates: Expo supports over-the-air (OTA) updates (the process is called EAS Update), allowing developers to push updates to their apps without requiring users to download a new version from the app store.
9. Expo Snack: Expo Snack is an online code editor that allows developers to quickly prototype and share their code with others.
10. Third-party libraries: Expo supports a wide range of third-party libraries and plugins, making it easy to add additional functionality to your app.
11. Easy debugging: Expo provides tools for easy debugging of your mobile app, including debugging on real devices and simulators.
12. TypeScript support.
13. Different styling options, including Styled Components.
14. You can even use Next.js in your Expo project to be able to share code between mobile and the web.

Limitations to consider when using Expo.js:

1. Limited access to native APIs: Expo provides a set of pre-built APIs that allow you to access common features such as the camera or push notifications, but if you need to access a more specialized or custom API, you may need to eject from Expo and use React Native directly.
2. Limited control over the build process: With Expo, much of the build process is handled by the Expo servers, which can limit your ability to customize or optimize your app's build configuration. You may also have to wait for Expo to update its own dependencies before you can update your app's dependencies.
3. App size and performance: While Expo does offer some optimizations to reduce the size of your app, it may still be larger than a native app, which can impact performance and user experience.
4. Dependency on Expo servers: Your app may rely on the Expo servers to function properly, which means that if those servers experience downtime or are discontinued, your app may stop working.

Conclusion

In this article, we've considered several modern React frameworks. All of them are great choices and all are powerful frameworks that provide a lot of helpful features and tools. When choosing between them, it's essential to consider your project's specific needs and requirements, and your personal preferences.

In my opinion, both Next.js and Gatsby are very similar nowadays and provide developers with a similar toolkit, despite beginning their journey from different starting points (Gatsby – as a static website generator and Next.js as an SSR app framework).

Gatsby may appeal to you by the GraphQL data layer, the Gatsby Cloud features, and the plugin system. Next.js may be a better fit for you if you want to decide yourself how to query data, want to use the blazing-fast Rust tooling, and prefer the Vercel infrastructure.

If you want to explore an approach to building React apps that embrace web standards, but is a bit different from other frameworks, Remix might be a better fit. Finally, if you're building a mobile application, Expo is a great choice that provides a lot of helpful tools and integrations.