React frameworks
By Peter Chapman
As 2024 begins, frontend development React is a very different place then when I started out. If you are looking to start a greenfield project, you might be asking yourself: should I use a framework, or not?
What problems are you trying to solve?
It's always important when choosing any library or framework to ask yourself this question. These frameworks, in my mind, solve the problems of SEO driven sites like content blogs or e-commerce. They focus heavily on empowering the developer to make blazing fast and scalable dynamic pages that are easily scraped by web crawlers. This accounts for most of the internet you and I traverse on a day to day basis.
If you are building out a robust web application that is gated behind a login screen you might not have these concerns. For example, keeping data cached locally from page to page is one thing that these frameworks don't handle well, since they traditionally refetch data when navigating between pages.
React is just a view layer
React alone is just a view layer. It does not support routing, server-side rendering, static site generation, and data loading out of the box. Before modern React frameworks existed one needed to pick the libraries that met their needs and hope that everything played nicely together. Frameworks support these features out of the box in an opinionated way that allows developers to skip the step of picking out libraries, and they make long term maintenance of these features easier by reducing the complexity of maintaining and upgrading.
NextJS and Remix
In recent years NextJS and Remix have emerged as the two leading React frameworks. Over the years the feature sets of these frameworks have become more aligned. We've even seen NextJS adopt some features from Remix in recent years, like server components. Most of the differences lie with the opinionated implementations each has: they both offer the benefits described above in their own unique ways.
NextJS
- Hybrid rendering - Supports the ability to easily handle server side and client side rendering on a per page basis.
- Supports Static Site Generation (SSG) - Supports the generation of static pages at build time.
Remix
- Strong focus on server - client interactions
- Route based data fetching - Tightly couples route resolution with data loading
- Enhanced Form Handling - Streamlines server interactions to improve user experience
Use in the real world
One thing often overlooked when choosing a framework or technology is the reason for its popularity. I look at the shift to NextJS over the years and can't help but think that there is a billion dollar company backing it who sells only services supportingNextJS. Their continued success requires NextJS to be the future of React development.
We've even seen recently that NextJS has hired core React team members, who are working closely to move the core React roadmap toward the vision of NextJS.
It would be unfair to only target NextJS here as Shopify has made continued investments into Remix, but Remix is not the product they are selling.
So which should you choose?
At the end of the day choosing to use a framework is a big decision that will shape the direction of your project. One size does not fit all and only you can choose what's best for you. Choosing NextJS or Remix is probably right for you, but it's always worth weighing the pros and cons based on the problem you are trying to solve.
