Remix Takes on Next.js in Battle of the React Frameworks
The JavaScript frameworks Remix and Astro are currently getting a lot of buzz as simpler alternatives to Next.js, the dominant framework of the React era. Of the two upstart frameworks, Remix is more of a direct competitor to Next.js, since they are both based on the React library (Astro is framework-agnostic, so you can use it not only with React, but with Vue, Svelte, and others).
Another thing Next.js and Remix have in common is their corporate backing. Next.js is sponsored by the VC-funded company Vercel, while Remix was acquired by Shopify in October 2022.
So Remix and Next.js appear to have a lot in common, but what you may not realize is that the origins of Remix go back several years before Next.js. So to find out more about the history (and future) of Remix, I spoke with its co-creator and CEO, Michael Jackson.
React Router and the Origins of Remix
Probably the biggest differentiator of Remix is its approach to server-side rendering. Remix describes itself as “a seamless server and browser runtime” that leverages “distributed systems and native browser features instead of clunky static builds.” It is built on the Web Fetch API, rather than Node, and “can run anywhere.”
The core of Remix’s server approach goes right back to 2014, when its creators released React Router. Indeed, the Remix documentation states that “90% of Remix is really just React Router,” which it calls “a very old, very stable library that is perhaps the largest dependency in the React ecosystem.”
“React Router was a project that we started at a time when React itself was still struggling to gain popularity,” Jackson told me. “I know it’s kind of hard to believe now, looking at the broader web landscape where React is king.”
React Router was created in 2014 by Jackson, at the time a Twitter engineer, and Ryan Florence, an engineer at a company called Instructure. The pair built React Router because such a library was missing from React itself. Put simply, React Router enables “client-side routing” — meaning new JavaScript components can be loaded without a full page reload.
Jackson and Florence built a consultancy around React Router, but for several years they didn’t offer their own prescribed way to use React as a whole. Guillermo Rauch beat them to it with Next.js, which debuted in October 2016. But it wasn’t until 2020 that Rauch’s company, originally called ZEIT but re-named Vercel in April 2020, began to seriously commercialize Next.js. This was around the time that Remix was born.
“In 2020, we decided to take on the rest of the stack and see if we could build out something that was more end-to-end, a full-featured framework on top of React Router,” said Jackson. “And so that’s what Remix is. Remix is basically all of our opinions about web development, built on top of React Router.”
He added that a lot of the inspiration for Remix came from old PHP frameworks and also Ruby on Rails, one of the most popular web frameworks of the Web 2.0 era.
How Remix Is Used in Shopify’s Stack
Jackson mentioned a couple of times during our interview that many “large enterprise companies” had built on top of React Router over the years — and one of them was Shopify. “So they already knew us,” he said, “and were using our software long before the acquisition of Remix.”
Indeed, Shopify had tried to build its own Next.js-like framework. In November 2021, just under a year before the Remix acquisition, Shopify launched a React-based web development framework called Hydrogen. At the time, Shopify’s Principal Engineer Ilya Grigorik told me that the company’s goal was “to get server-side rendering and dynamic commerce working well together.” Hydrogen was its custom-built solution for this.
But when Remix was acquired in October 2022, it quickly became the new default framework for Shopify. Shopify.com was rebuilt using Remix, Jackson told me. Shop.app, the company’s iOS and Android app, was also rebuilt using Remix. But wait, there’s more. Jackson said that Hydrogen has been “completely built on top of Remix now.”
“So Hydrogen, these days, functions more or less as a library on top of Remix,” he said. “Remix is sort of the foundation for all of Hydrogen v2.”
One of the current projects within Shopify is to rebuild the dashboard that all of its e-commerce customers use. Jackson said it’s the company’s biggest piece of software (“millions of lines of code”). An interesting aspect of this project is that they’re using Vite as the compiler in Remix, which is a piece of software that doesn’t come from the React community, but from the Vue community. Jackson described Vite as “like an alternative to Webpack,” the module bundler for JavaScript.
Jackson also made the point that third-party developers are also being encouraged to use Remix.
“We shipped a template that allows developers who are working on third-party apps to actually build their apps with Remix as well, and, you know, authenticate with Shopify and do all of that. So […] Remix isn’t just something that we’re recommending for our merchants, it’s also something that we’re recommending for developers who are integrating with Shopify.”
How Remix Is Tackling React Complexity
One of the themes of the past year in frontend development has been the growing complexity of the React ecosystem. I asked Jackson whether he agreed that React has gotten too complex.
“Yeah, I see the pushback,” he acknowledged. “There are a lot of people who are like, oh geez, React used to feel simpler. My plea for the React community would be to realize that there are a lot of good ideas there. The current implementation of a lot of these cutting-edge React ideas is […] Next.js. That’s where a lot of these ideas get released and talked about for the first time, in Next.js.”
Jackson’s point is that Remix has its own implementations of new React features, so it’s worth developers checking them out.
“That was the whole point of Ryan and I building Remix — when I first looked at Next, I couldn’t even get it to return proper status codes. It was very clear to me, very early on, […] that we valued very, very different things.”
He cited progressive enhancement as one of the things that Next.js doesn’t seem to value but that Remix does.
“To those of us who’ve been doing web for a while, that term [progressive enhancement] conveys a lot of understanding and value for our users. And that’s something that we really, really care about, that’s something that you’ll always get when you are building with Remix.”
