Introduction

I recently did a deep dive to evaluate what technologies to choose to address scalability gaps within my organization. My goals were to directly increase revenue by generating more leads, improving customer retention, and boosting developer velocity. Part of the strategy to achieve this is by utilizing modern technologies and web standards that improve site performance, centralize common code, and give us better tools to meet business objectives.

Thus, we are re-architecting the current platform! From WordPress to a 3rd-party headless CMS and a rendering service. Several good options were available, but one stood out from the rest… The team evaluated Remix and discovered that it came out on top in nearly every category!

A very valid and primary concern with Remix is that it is so new in comparison to Next.js. Let’s dive into that.

The Problems

First, it’s important to understand the reasons why we decided to migrate our architecture. There are many reasons, I won’t enumerate all of them, but here are some major ones.

1. Speed - According to various studies, site speed has a big impact on conversion rates. How many leads could we be gaining? How many users are losing trust and faith in products because a site is slow? For someone in the US, our homepage takes 15 seconds to be fully interactive and 4.5 seconds before the user even sees a thing. And for international users? It gets worse. The site assets are served only in a US region, international users suffer from a 6-second white screen from Hong Kong.
2. Scale - Our content creators reported waiting times as long as 10 minutes to load a page for editing. We have just about maxed out the scalability of WordPress. Our content creators could be generating more leads, but are instead subject to watching loading spinners.
3. Consistency - Each locale we support is managed by a separate WordPress instance. Particular sets of changes that are made to one need to be manually copied to the rest.
4. Reliability - Each time a site goes down or experiences additional slowness, users lose trust. We have sparse monitoring and alerting. Deployment pipelines are manual, subject to error, and take longer to get new changes live.

So Why Remix?

We decided on Remix over Next and other alternatives, even though it’s so new, and the potential risk involved in selecting a brand new framework. Why? Let’s find out, it’s going to knock your socks off!

Confidence and Community

Remix is being developed by some of the primary people who paved the way for React’s success: Kent C. Dodds, Michael Jackson, and Ryan Florence; each with an incredible track record for building widely used tools and successful companies through widespread training. They are known for pushing technologies forward with innovative ideas that the rest of the industry adopts.

Example: React Router. The Remix creators built and sustained React Router, perhaps the most widely used React library ever. 7/10 times React Router is installed in an application that uses React. That’s how good it is. Even better, Remix is almost entirely based on React Router and web standards that have existed and improved for years. On the other hand, Next built their own router and their own specific set of conventions, oftentimes not utilizing web standards. Remix merely provides a few conveniences on top of React Router for Server Side Rendering (SSR). The Remix docs describe it as “a compiler for React Router” and, according to Ryan Florence, they “could have just named [Remix] ‘React Router SSR’ and called it a new feature.” And that’s precisely what Remix is. It’s not a completely new framework, but is basically just SSR for React Router. Definitely a time- and battle-tested technology.

Let’s take a look at the trajectory of React Router vs Next:

See that spike in growth since the end of 2021? That’s due to React Router’s major v6 release that enabled core features for Remix to be born. Although Remix had its first stable production release in November 2021, the founders have been laying the foundation for Remix since the end of 2019 in React Router. Remix is not a side-product. It is being developed deliberately to solve SSR better than anyone has ever done before.

The founders are all-in on developing software that enhances web experiences for everyone. Each of them have been working on this mission for nearly a decade and have solidified a vision that brought them together to rock the web in a monumental way. They are dedicated to the success of Remix and have built a strong and long-lived community that is gaining traction more rapidly than ever before with the release of Remix.

Functionality

Remix has all the capabilities supported in their API that we would most likely need for our use cases. Remix offers built-in support for nearly all features that Next does, in some cases more features (such as session support), and in nearly all cases their features/APIs are far better than Next. Notable features that they do not yet have built-in that Next provides are:

• Image optimization. However, there are open source options available and we plan to use the image API of the CMS for this instead anyway.
• CSS Modules. However, we’ve already decided as a team to standardize on TailwindCSS for the plethora of benefits it provides. We can also use regular CSS if we need to. Remix is likely to release explicit support for CSS Modules in the near future.

Support

The Remix community provides great support, with the maintainers being active on their Discord server. We’ve already experienced the maintainers answering some of our questions directly! Thousands of talented engineers across the globe recognize the benefits of Remix and are actively contributing.

Funding

Let’s talk about funding. Remix received $3M in funding in October 2021. From Ryan Florence, “VCs from the biggest firms and small, and even tech companies, are reaching out to us all the time to give us money for a series A. We don't need the money and we've got several business plans that we'll tackle as soon as the few bugs left and DX kinks are worked out.” Even if the maintainers didn’t raise any money, they would be well off with what they’re good at: training. Each time they’ve released new tech (all open source software), their business strategy has often revolved around education, which has always produced incredibly lucrative results. There’s no doubt that the Remix team can sustain themselves without ever charging a thing for the software they build. This has been their model for nearly a decade.

Performance

Remember our problem of speed and user abandonment? Remix is FAST and is going to allow us to captivate our users with a delightful first-glance experience. Here’s a screenshot of a Remix Port of Next’s primary ecommerce example (using their default best practices!) with no functionality difference. The Remix Rewrite is using Remix’s default conventions.

Lightning McQueen couldn’t even match that speed!

Want to compare Remix against a statically generated site? Take a look at this simple example:

• Fakebooks Static (CRA) - Notice all those spinners? Impossible to get away from with a static site, which Next encourages by default.
• Fakebooks Remix - Notice the imperceptible loading? That’s due to Remix’s use of the web standard link prefetching right there. Remix loves and embraces the web standards that have downright gotten so good in recent years.

Productivity

And guess what, the speed doesn’t end there for the user consuming the site. Next is built around Webpack which causes regular build times of usually 30 seconds, if not more! And sometimes far, far more. Remember that compiling comic? Oh yeah, it’s definitely alive and well in the Next world.

Remix’s build time takes less than a second. Remix’s APIs are more elegant. Developers don’t need to learn as many new APIs because most of the time they are just using common web standards. Features get developed and shipped faster, reducing development time and computing resources.

Remix offers better quality software design by default. At every angle, they are obsessed with nothing less than the best user experience and developer experience. It is often a challenge to get both of those in one basket and Remix nailed it! Take a look at these examples:

• Route Layout - Layout conventions make for the most maintainable design. Nested Routes and the Outlet component allow for sending less unnecessary code to the browser, compared to Next, and naturally encourage separation of concerns by default.
• Error Handling - Handling undesirable scenarios is localized to Nested Routes in such a simplified way it makes you want to laugh with joy. This means that if a single request fails, your entire page will still look good and the user is left with a better idea of what exactly went wrong.
• Data Fetching - Requesting data is far more modular in Remix. It makes for drop-in orthogonal abstractions and sharing.
• Data Mutations - Remix embraces form web standards and adds a little sugar on top. With their strategy, we can say goodbye to massive form validation libraries on the client side.
• Accessibility - Just when you thought the Remix team couldn’t do everything. In fact, they were the first ones to develop some of the best patterns that others are now following for accessible-by-default components with Reach UI. You bet that they are dedicated to ensuring a quality experience for all users.
• Testing - Kent C. Dodds, the creator of the infamous Testing Library, joined Remix and is focused on ensuring that there are best practices out-of-the-box for testing with Remix. Did you know? Testing Library is so good that React recommends it as the primary testing library of choice!

Contingency Plan

We’ve made it this far. Remix just seems too good to be true, much like the other successful things that the founders have put out. But… What if Remix doesn’t work out? What if there’s a morbid world where the 3 founders are hit by a bus and the zombie apocalypse breaks loose?

Development Guidelines

We are committed to following the below guidelines to ensure the lowest-cost migration possible.

• Server
  • Infrastructure (metrics, logging, etc.) is at the server layer (e.g. Express.js) and can be transferred over to Next with little to no change.
• Framework agnostic
  • Components should be framework agnostic.
    • With the exception to Link and Image components since these are currently framework-specific. However, they are simple and have very similar APIs, making them easy to swap out to Next.
  • Any client code, such as for the CMS, should be framework agnostic.
• Forms should use web standards
  • Although Next does not encourage using web standard forms, it is possible to use them in Next. In addition, we only have 1 Marketo form and are not aware of many others. The Marketo form is not handled by our system and hits Marketo’s APIs, so our implementation will be as close as possible to being agnostic anyway.
• Routing
  • Follow the conventions in the framework.
  • The layout conventions are deterministic enough in either framework that we could automatically migrate.
  • Remix’s Nested Routes would be the biggest challenge to migrate, but due to the natural orthogonality of their design, will be easier to migrate.

Cost

So what would it take to migrate from Remix to another solution, such as Next?

One great example is Kent C. Dodds, with a few contributors, migrated his complex site to Remix in 4-5 months. I estimate that we could do a migration in less than a quarter for a single engineer, as our site will have different and less complexities in its design. For example, we don’t manage authentication sessions on the core marketing sites. Most pages will be rendered in a dynamic fashion from the CMS, so there will be less to migrate in that regard.

Remix will influence the way we develop components by using fewer JavaScript libraries on the frontend. The same thing can still be done in Next via getServerSideProps and custom cache headers, making a transition far easier. Remix just makes this easier by supplying performant configuration by default, which we would need to replicate in Next.

What about the flip side? What if we chose to go with Next to begin with instead of Remix? I estimate that we would likely lose, at minimum for our first year, 2 developer months. And we will most likely want to migrate to Remix anyway as it obviously starts to take over the market.

Conclusion

With Remix in our architecture, we have a great opportunity to increase revenue, improve customer retention, and boost developer velocity.

In the appendix, there is a story about the Darkness. Here is a complete key that connects it to our journey.

Appendix

Storyline

While putting my 7-year-old to bed, she asked what I’ve been doing at work lately. This story was the result and sets the tone for this document.

The Darkness was chained. But over time, its power grew. Some within the Kingdom became aware, but most believed the Darkness was no real threat. In later years the Darkness, in its cunning ways, overtook such small pieces of the Kingdom that it was hardly noticeable except to the most well-trained eye. The Wizards were the first to notice. They strove to convince the Kingdom of their grave danger, but their voice would not be heard. Then everything changed.

The Darkness rose up from its long-drawn prison. No longer cloaked in shadow, it began destroying the Kingdom’s agriculture. Food was scarce. And the Darkness filled the land. Only then did the Kingdom remember the words of the Wizards and began begging for their return. Now, with the belief of the Kingdom fueling their power, the Wizards set forth to develop a Super Weapon to combat the Darkness. The Wizards considered every possibility, planned for every outcome.

With the Kingdom and the Wizards aligned on a sole purpose, their unity accelerated the development of the Super Weapon. Just when the Darkness was about to consume everything in its sinister desires, it overlooked the strength of the combined belief of the Kingdom. When the Super Weapon was ready, the Darkness stood no chance. The Super Weapon released such a remarkable Light that sent the Darkness back to its deep cells within the earth, never to return again…