Best React js Tech Stack in 2024

​​Introduction

Many times customers reached us asking about development with React js, because of the high performance, components reusability and all of these amazing features it gives many projects. But we all know, that besides the power of React.js, it’s the additional tech stack that brings strength to the project. Of course, if it’s chosen well, according to its nature and the business requirements we need to fulfil. Today we will share the best React js tech stack that we suggest for most of the projects. The final choice depends on the customer’s internal tooling, business preferences and project types, but still – here’s something we recommend, so you can use it as a guide through the best choices. 

tl;dr Perfect React js tech stack recommended by Pagepro:

• TypeScript
• Next.js
• Tailwind
• Vercel
• Sanity
• Tanstack Query | Apollo

The Core of React.js Development in 2024

Since its release, React JS has built a wide community, backed by many tools and libraries that make React development efficient and simply a pleasure. It’s constantly evolving, and with the last released version, 18, we got such amazing features like Concurrent Mode, Suspense for data fetching and redesigned Hooks API. From what we saw in a sneak peek the React team shared with us, version 19 includes further improvements to the React Compiler, which is crucial for optimizing UI rendering,  and changes within Actions, which simplify data transfer between the client and the server. I can’t wait for the launch! 

Our choice of the best React.js Tech Stack 

TypeScript

I need to admit, that something that greatly influences my development is the TypeScript adoption within React. It reduced runtime errors and improved the type safety across the projects. Also, thanks to that, we can easily update the code in the future or get back to it after months (or years) without any worries. TypeScript makes the apps bulletproof and improves developers’ productivity, code maintainability and reliability. It’s just great. And it’s the first tool we use across React.js projects, that I wanted to highlight at the very beginning. 

We compared TypeScript to JavaScript to highlight the main benefits TypeSctipt brings to the project.

Next.js 

If you went through our blog at least once, you probably already know that we find Next.js, currently, the best React.js framework available. So no surprise, it’s our preferred tool for most of the projects. Also, our customers are right now deeply interested in creating their projects with it, and many times during the technical calls, we’re asked about it. 

So, why do we choose it over other tools? 

Routing and Server-Side Rendering

We all know how important is to choose the right technology for routing and server-side renderings, especially when we reach to provide the users easy and smooth navigation through the website or web app  (and, as I know, we all want it). 

• Next.js simplifies routing by using a file-based routing system, where pages are automatically routed based on their file names in the ‘pages’ directory. So we no longer need to set the routes up manually (as you need to do, for example with React Router) and it’s just more intuitive and effective. 
• Additionally, built-in SSR and static site generator SSG, improve the initial page load and SEO, and also, faster, easily scalable websites. This is not limited to Next.js of course, but it’s one of the features that we widely use across the projects. It returns the full HTML with all required data and then hydrates it so users can see the content much faster if we compare it to SPAs.
• Incremental Static Regeneration allows pages to be updated at runtime without the need for rebuilding the whole site, so fresh content is provided to the users with minimal latency.
• Server components further improve performance by allowing React components to render on the server without sending the accompanying JavaScript to the client. It helps us reduce the amount of code which has to be executed in the browser and transferred over the network, and results in better load times and of course, better user experience. 

Performance Optimisation 

Performance optimisation techniques available in Next.js, like code splitting, lazy loading, and image optimisation, are critical for enhancing application speed and user experience. They’re also supported by Astro or Remix, and the easiest way to implement them is to follow the documentation. 

Community 

We will say it over and over again – the community around Next.js is its superpower. We can’t compare it to any other frameworks mentioned above, it’s just not the same level. With this wide and very active community, which is also connected to React’s community, we can get all the answers, libraries and tools, whenever we need. 

Other frameworks

We need to admit there are available other interesting frameworks that may be a great choice. You know, it always depends on the type of the project. So we want to mention here some of them, especially: 

• Astro, which is easy to use, and while it’s a quite new player on the market, is constantly improving. Just now they added DB to their tech stack, so you may store some data within one ecosystem. We already compared Astro to Next.js, you can read it here: https://pagepro.co/blog/astro-nextjs/ 
• Remix, which is based on React Router and maintained by the same team, is highly favoured among developers who have used React Router in Single Page Applications. It has grown in popularity since its release in 2021, and until now, I can’t say a bad thing about it. I am looking forward to how they will evolve. We already compared Remix vs Next.js, check it out.
• Gatsby, once loved and extremely popular (even among our projects and clients) it’s not the preferred way to go in more complex projects. But I’m not saying it’s bad, it still answers the needs of many projects, even among very popular companies. Here you can check out our comparison of Gatsby vs Next js.
• React Router, which continues to evolve too, and offers features for easier content management, but it shines mostly in SPAs (Single Page Applications). 

Tailwind 

Tailwind CSS is our favourite tool for styling in React.js. Compared to others, Tailwind differentiates itself by offering a utility-first CSS framework that enables rapid UI development. And unlike traditional CSS, Tailwind empowers us, developers to build custom designs directly in their markup. This, of course, leads to faster development cycles and reduces the need to jump between HTML and CSS files. So it’s a super-efficient solution! 

Also, developers can effortlessly share and reuse components across different repositories, thanks to the standardized utility classes Tailwind CSS provides. And we all know how beneficial it is in collaborative environments where consistency and rapid development are crucial.

Other Styling Tools

While for us Tailwind is a go-for choice in almost every project, we decided to mention other tools too, which we use from time to time, especially when our customers require them: 

CSS-in-JS Libraries (e.g., Styled Components): These libraries offer scoped CSS and potentially better performance with a great developer experience. They were very popular for years, but recently we noticed a big drop in usage. 

UI Component Libraries (e.g., Material-UI, Ant Design, Mantine): These libraries help speed up UI development and ensure consistency across components. However, you don’t have direct access or control over the components. You can only use things that are mentioned in documentation and you don’t have full control over them. Additionally, the designs need to be created exactly in line with these libraries.

shadCDN: The shadCDN offers a new approach to component libraries. It offers a collection of high-quality components and hooks but you can modify them as you wish (as they are a part of your code – not a part of external library). You can use a single component out of there or use that as a starting point. Get some components to quickly show up some demo. Then evolve them as your app grows and change the functionality. It’s also an open source and it keeps growing! So it’s totally worth keeping an eye on it. 

Vercel

For hosting, we usually opt for Vercel. To us, it’s a rather simple choice – Vercel created Next.js (which is our preferred framework), so it provides native support for Next.js apps and is optimized for hosting them. So wherever we want to use the full potential of Next.js, we host the solutions on Vercel. But of course, there are other reasons for us to choose it too: 

• Vercel uses a global CDN to serve the content from the edge, closest to your users. And thanks to that it significantly reduces load times and improves the overall user experience.
• Vercel automatically provisions SSL certificates for your projects and ensures your site benefits from HTTPS encryption from day one. 
• Deploying with Vercel means you can easily roll back to previous versions of your site. Additionally, its smart caching mechanism ensures content freshness without sacrificing performance.
• Vercel supports the use of environment variables for better project configuration management and allows for easy linking of custom domains to your projects, providing a professional touch to your deployments.
• Using Vercel is user-friendly and easy to manage, so it eliminates the need for extra DevOps expenses 
• Vercel supports all of Next.js features out-of-the-box, which saves time on deployment and maintenance that other hosting platform would require

Other hosting platforms

But of course, choosing the hosting by our customers is sometimes limited to what they currently use, or (of course!) their preferences. And usually, the competition to Vercel is the same: Netlify & AWS. 

Netlify: Renowned for its ease of use and support for Jamstack architecture, Netlify is a strong opponent to Vercel. It offers features like continuous deployment from Git across all plans, a vast network of plugins, and automatic serverless function deployment. Also, in both Vercel and Netlify building commands in the UI is as simple as connecting the repository to the project and declaring the test & build commands in the UI. There, you will also have access to preview branches where you can test your code before it gets deployed to the final destination. 

AWS (Amazon Web Services): AWS provides a strong and highly scalable environment suitable for hosting complex, large-scale applications. With a suite of services like S3, Elastic Beanstalk, and Lambda, AWS caters to a broader range of hosting needs, from simple static sites to dynamic, serverless applications.

Sanity

From the wide offer of modern CMSes, we choose Sanity as our favourite and add it to our list of best react js tech stack. Headless CMS platforms have revolutionized content management, offering RESTful or GraphQL APIs for smooth integration with React applications. They provide outstanding flexibility in content delivery and management strategies. You can choose what they should do for you – they can be page builders or databases for your content. Additionally, they offer a wide range of pricing that you can choose from depending on your project scale. 

So why do we like Sanity so much? 

• It gives us the most power and flexibility to create custom solutions for our clients. Their requirements vary from project to project, and almost none of them are the same. With Sanity, we can answer all of these needs in the quickest possible way. 
• If we need to build a highly customized solution, Sanity is the ideal choice – we can tailor the CMS to specific requirements using Sanity Studio.
• We can define different workspaces within the CMS to answer various content use cases, like localization or readiness. The flexibility extends to the studio’s appearance and functionality – each workspace can be customized and precisely aligned with the client’s unique needs. This is unique, since in other CMSes the workspace view is defined by default and lacks customization options.
• And once we mention customization, it allows the content managers to create and share various types of content, and we developers, can create custom elements like forms or validations.
• Sanity Studio also speeds up the process of linking a ready-to-use content backend with the app we’re working on. 
• The content can also be managed through API, which is crucial for dynamic content updating and fetching and allows devs to interact with the content stored in Sanity from anywhere in the app.
• We can host the Studio on our own hosting platform which cuts the additional costs.
• Also, during the development we can cooperate within our team, or even the customer team in real-time which can greatly boost time to market – we don’t have to wait for the edits done by someone else to add our comments. It’s great! 

Of course, the choices of our customers are various – there are many tools available and often they prefer the CMS they were using previously, the one that is already used within the company, or just a cheaper one (yes, we admit that Sanity is not the cheapest one). 

Other CMSes we recommend

Other CMSes we find pretty useful and flexible enough to meet most of the customers needs are: 

Strapi with its open-source nature gives us flexibility and direct control over the backend systems. Its customizable API and rich plugin ecosystem enable quick integration with a variety of other tools and systems. And it’s development model: community-driven assures constant growth of the platform with new features and improvements regularly introduced by contributors worldwide. 

Storyblok was our internal choice for managing our website. The marketing department chose it for the live previews and component-based approach. They can reuse the content blocks across different pages and layouts, which makes their work more effective. 

Prismic shines with its user-friendly content editing interface. Its custom-type system allows for the creation of a wide range of content structures, from simple blog posts to complex product pages, accommodating various content requirements with ease. 

Contentful is celebrated for its enterprise-grade scalability and reliability, supporting large-scale digital experiences with ease. Its content infrastructure is designed to manage and deliver digital content to any channel or platform, providing a unified content repository that empowers teams to work more efficiently.

Tanstack Query | Apollo client

And last, but not least: data fetching and state management. Here, we usually choose Tanstack Query and Apollo. 

TanStack Query streamlines the process of querying and managing server state in React applications (as we write in React, but it also supports Svelte or Vue). It’s a go-to when we look to minimize the complexity around data fetching and state synchronization. Thanks to features like automatic caching and background updates we can significantly cut down the code needed to keep app data fresh and in sync with the server. So the apps are just more pleasant to use. 

Apollo, tailored for GraphQL, offers a rich set of features that make working with GraphQL data a breeze. It’s particularly appreciated for its client-side cache management, which of course greatly influences app performance and user experience. By smartly managing data both locally and from GraphQL APIs, Apollo reduces the need to write data fetching and caching logic from scratch. This means developers can spend more time creating unique features instead of wrestling with data management.

Of course, the choice lies in the project nature, but both of them allow us to optimize our development process, so we can build highly responsive, fast, and reliable applications.

Conclusion

Here’s a quick rundown of our top picks for React projects, each chosen for its unique strengths and how it complements our workflow. Remember, while we’ve got our favourites, the perfect toolset can vary based on the specific needs of your project.

• TypeScript: Elevates code quality and maintainability, a staple for any project we undertake due to its robust type safety.
• Next.js: Our go-to framework for React, offering seamless SSR, SSG, and ISR, perfectly aligned with our performance and SEO goals.
• Sanity: Wins our vote for content management with its incredible flexibility and real-time collaboration features, allowing us to tailor content structures with ease.
• Tailwind CSS: For styling, its utility-first approach speeds up UI development, making it a breeze to maintain consistency across projects.
• TanStack Query & Apollo Client: Both play crucial roles in data fetching and state management. TanStack Query simplifies server-state syncing in React apps, while Apollo shines for its GraphQL integration, enhancing client-side data management.

These tools, though preferred by us for their efficiency and developer-friendly features, might not be the one-size-fits-all solution for every React project. We’re always open to adapting our stack based on project requirements, internal tooling preferences, or simply exploring new tech to find what works best.

Read more

Best tech stack for React Native

React vs React Native