Some time ago Andrew Clark, one of the members of the React core team at that time, posted on Twitter starting with such a phrase: a thread https://twitter.com/acdlite/status/1617611126514266112?embedable=true Approximately at the same time Dan Abramov, another React core team member, wrote in a comment to a PR suggesting Vite as a replacement for . such a post CRA It felt like something serious was going on as for many developers for years the strategy to use React has been the following: Create a new app using CRA (maybe lately using ). Vite Add libraries of choice to make your life easier. 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, (also, referred to as )? what are React frameworks 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 , the cloud-based platform for deploying and scaling web applications behind Next.js). Vercel 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: 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 function or the one. getServerSideProps getStaticProps : 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. Automatic code splitting Built-in CSS support: Next.js CSS modules, Sass, PostCSS, and CSS-in-JS libraries. supports 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. TypeScript support: Next.js natively TypeScript, which offers strong typing, easier debugging, and better code quality. supports Image optimization: Next.js images automatically, reducing their size without any loss in image quality. optimizes : 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. API Routes : 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. also supports nested routes and dynamic route segments. File-based routing The concept of pages 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. : 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. Vercel Integration Preview Mode: Next.js supports the , which allows content editors to preview changes in real-time before publishing. preview mode Internationalization: Next.js has built-in support for , which allows developers to create multi-language pages easily. internationalization (i18n) Rust-based tooling: From to , Rust-based tools are used in Next.js heavily to provide developers with faster DX. Next.js Compiler Turbopack Client-side navigation: Next.js provides client-side navigation using the , which provides a smooth and seamless user experience. Next.js Link component The subjective cons are: Learning curve: I mean are great, but you need to study them in order to be able to build stuff. the docs 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. 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 so that you can host it on any web server that can serve static assets. static HTML/CSS/JS 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: 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 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. Automatic code splitting: Remix automatically splits code into smaller chunks for better performance and faster load times. 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, are supported. nested routes 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. Pre-rendering and rehydration hooks: Remix provides hooks for pre-rendering and rehydration, allowing developers to control the rendering and hydration of their applications. : Remix provides a simple and flexible API for working with forms, including built-in validation and error handling. Forms and validation -based tooling, meaning everything is fast. esbuild : 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. Stacks : 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. Built-in CSS support TypeScript support: Remix natively TypeScript. supports The philosophy in general is to embrace web standards, not fight them. Cons: Learning curve: the same thing that applies to Next.js. You need to read lots of to get comfortable with your Remix project. docs 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. 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 You'll need Node.js support on your server. The Remix team has been actively promoting their product. E.g. 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. here 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: : Gatsby is historically known as a static site generator enhanced with React Hydration. But starting with Gatsby 4, you can choose alternative rendering options ( or ) in addition to static site generation (SSG) — on a per-page basis. Rendering options Deferred Static generation (DSG) SSR Built-in : Gatsby includes a built-in GraphQL data layer, making it easy to fetch and manage data from multiple sources, including APIs, CMSs, and databases. GraphQL : Gatsby makes it easy to build progressive web apps (PWAs) that work offline and can be installed on mobile devices. Progressive web apps (PWAs) Image optimization: Gatsby built-in tools for optimizing and processing images, including support for lazy loading and responsive images. provides : Gatsby automatically splits code into smaller chunks for faster load times and better performance. Code splitting Plugins and themes: Gatsby supports , making it easy to extend and customize the framework. plugins and themes SEO optimization: Gatsby includes built-in support for SEO optimization, including automatic generation of meta tags, sitemaps, and social media sharing images. Content mesh: Gatsby provides a content mesh feature that enables developers to combine data from multiple sources, including headless CMSs, APIs, and databases. : 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. Incremental builds Integration with , which allows you to use , Live Preview, , and host your app build with Gatsby. Gatsby Cloud Serverless functions CMS Preview Using SSG you can avoid having Node.js on the server which means there are fewer things that can get broken on production. [File-based routing] Gatsby supports allowing you to configure routes the way you need. file-based routing The Cons: Learning curve: again, it's not just React anymore and reading docs is a crucial part of your success with Gatsby. 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 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, (in Russian). In general, I think that Gatsby is very nice to build a modern web app. Recently, Gatsby , a cloud computing platform, which means that in the future we can expect a deeper integration with them. here's my talk about it has joined Netlify 4. Expo The last framework from the list is Expo, which is a 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. React Native The main features are: Cross-platform development: Expo developers to build and deploy mobile applications for iOS, Android, and the web from a single codebase, using React Native. allows 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. Live reloading: Expo provides live reloading just like a normal React dev environment nowadays, which is rare. Push notifications: Expo includes built-in for push notifications, making it easy to send notifications to users of your app. support Secure storage: Expo provides for sensitive data, including user credentials and authentication tokens. secure storage Sensible defaults: Expo sets sensible defaults for common settings and configurations, making it easier for developers to get started quickly. Easy deployment: Expo provides a simple and easy , allowing developers to deploy their apps to the App Store and Google Play Store with minimal effort. deployment process OTA updates: Expo supports over-the-air (OTA) updates (the process is called ), allowing developers to push updates to their apps without requiring users to download a new version from the app store. EAS Update Expo Snack: is an online code editor that allows developers to quickly prototype and share their code with others. Expo Snack Third-party libraries: Expo a wide range of third-party libraries and plugins, making it easy to add additional functionality to your app. supports Easy debugging: Expo provides for easy debugging of your mobile app, including debugging on real devices and simulators. tools . TypeScript support Different styling options, including . Styled Components You can even use in your Expo project to be able to share code between mobile and the web. Next.js Limitations to consider when using Expo.js: 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. 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. 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. 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.

This story contains new, firsthand information uncovered by the writer.

The writer is smart, but don't just like, take their word for it. #DoYourOwnResearch

Popular React Framework Choices to Develop React Apps in 2023

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Will AI Take Your Job? The Right Attitude to Build a Career in IT

Authentication: Create a Simple Rick and Morty Wiki Page

Build Your Own Currency Exchange Web App in ~100 lines using CRA [A Step By Step Guide]

Building a React App with Rails API

Create React App is Dead! Here are Some Alternatives

Frontend Development Environment as a Package

Will AI Take Your Job? The Right Attitude to Build a Career in IT

Authentication: Create a Simple Rick and Morty Wiki Page

Build Your Own Currency Exchange Web App in ~100 lines using CRA [A Step By Step Guide]

Building a React App with Rails API

Create React App is Dead! Here are Some Alternatives

Frontend Development Environment as a Package

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps