Create-React-App is Dead. What Next?
In the past, create-react-app (CRA) was a popular choice for starting React projects due to its simplicity and ease of use. However, React’s new documentation, released on March 16, 2023, no longer recommends CRA as the go-to solution for creating React applications. Let’s delve into the problems associated with CRA and explore alternative options that React now recommends.
Doesn’t CRA Work Just Fine?
Well, for the most part, CRA used to be just perfect, but as technologies advance and the need to be dynamic increases, CRA had a lot of issues building up to it slowly being deprecated. Let’s explore some of these.
- Performance: One of the main issues with CRA is its large dependency size. By default, it comes with over 200 MBs of dependencies in the node_modules folder, which can negatively impact performance. Alternatives like Vite offer a much smaller dependency size of only about 30–34MBs. The smaller dependency size translates to faster updates during development, quicker server startup, faster builds (leading to lower CI costs), and improved user experience. A smaller bundle size is particularly crucial for better conversion rates, user experience, and SEO metrics like First Contentful Paint (FCP) or Largest Contentful Paint (LCP).
- Polyfilling core Node.js modules: CRA used to include polyfills for core Node.js and these polyfills were designed to make these modules work in the browser, but it was an inappropriate pattern since these modules were originally intended for server-side JavaScript. Although in create-react-app v5 these polyfills were removed, older repositories may still contain these problematic patterns.
- Custom configuration limitations: CRA imposes certain limitations on custom configurations, such as the inability to override the PostCSS configuration. To overcome these limitations, users would have to perform an “eject,” which essentially involves removing all the configuration files, such as Babel, Webpack, and node_modules, from CRA and taking control of the configuration themselves. This process introduces complexities and maintenance nightmares. Tools like Craco (Create React App Configuration Override) were introduced to help manage the overridden CRA configuration. However, maintaining a project in this manner can still be challenging, as every change in CRA necessitates corresponding adjustments in Craco.
Exploring Alternatives To CRA
Next.js
Next.js is a full-stack React framework that not only facilitates building user interfaces but also enables the creation of APIs. Maintained by Vercel, Next.js offers seamless deployment services on their platform. It simplifies the process of deploying Next.js applications and provides a robust solution for front-end development with API capabilities.
Remix
Remix is another full-stack React framework. It offers features like nested routes, which can be beneficial for parallel fetching, improving user experience by fetching multiple data sources simultaneously. Remix empowers developers to build powerful and efficient full-stack applications with React.
Gatsby
Gatsby is primarily focused on integrating applications with content management systems (CMS). It excels at creating static sites with a rich GraphQL data layer, allowing easy integration of content, APIs, and various services. Gatsby simplifies the process of building highly performant and scalable React applications.
Vite (not recommended by React docs but worth mentioning)
While Vite is not explicitly recommended in React’s new documentation, it is similar to CRA in terms of supporting client-side rendering. Vite is a development tool that provides advanced features like hot module replacement (HMR), the fast server starts, native TypeScript support, and more. It offers a streamlined development experience for React projects and is particularly useful for frontend-only applications.
By considering alternatives like Next.js, Remix, Gatsby, and even Vite, developers can benefit from frameworks that offer improved performance, enhanced development capabilities, and streamlined workflows. Making informed choices based on project requirements and considering the recommendations in React’s new documentation will ensure that developers can create React applications that are optimized, efficient, and provide excellent user experiences.
