All about Shopify Remix: Overview & Features

As we approach the release of the next Shopify Editions this summer, I wanted to take a moment to highlight an impactful piece of technology that Shopify announced in last summer's Editions: The default template for building new Shopify applications would be powered by Remix. I think now would be a great time to review this move, including the history and motivations behind Shopify's acquisition of the framework.

A Brief Overview of Remix

Remix is a full-stack React meta-framework, first released in November 2021. You'll often hear about Remix in comparison to another popular React meta-framework, Next.js. Both are open-source efforts but Next has been managed by its backing company, Vercel, since its inception. Remix was initially created by Michael Jackson and Ryan Florence, known typically for their excellent React Router npm package, which as of the writing of this post, is being downloaded over 9 million times a week! 🤯

From the outset, Remix aimed to address the pain points that developers often face when building web applications that require sophisticated data handling, state management, and server-side rendering. By embracing a more unified approach to front-end and back-end development, Remix sought to bridge the gap between the two, enabling developers to build more cohesive and maintainable applications.

A year after first Remix's V1 release Shopify announced that they would be acquiring the framework. This underscored Shopify's dedication to remaining at the forefront of web development and their continued efforts to provide best-in-class development experience for our community. In the announcement, Shopify points to some reasons why Remix was a perfect fit, namely the framework's emphasis on

• Progressive enhancement
• Reducing / eliminating loading states
• Support for edge runtimes

Throughout 2023, Remix would be woven into Shopify's infrastructure. It's now powering their headless stack Hydrogen and is the default template when building new Shopify Apps.

Features & Impact

Let's take a look at some of the reasons Shopify was inspired to bring Remix in-house.

Simplified Data Loading and State Management

If you plan on creating a storefront with Hydrogen, or building Shopify Apps, Remix's approach to data loading and state management is a game-changer. One of the challenges developers often face when working with e-commerce platforms is the need to manage and fetch data from various sources, such as product catalogs, inventory systems, and customer data. This process can quickly become complex, leading to convoluted code and increased maintenance overhead.

Remix takes an opinionated approach and introduces the concept of route loaders and actions. The loader function is used to provide data to your route, and the action function is used to perform data mutations.

With the loader and action API being the same, Remix allows you to co-locate components, styles, and server-side code, simplifying the process of data fetching and mutations directly within the component files.

Improved Performance and SEO

Remix places a strong emphasis on performance, leveraging techniques like server rendering, code splitting, and optimized data fetching. With server-side rendering, Remix ensures that the initial page load is handled on the server, resulting in faster rendering times and improved SEO. Additionally, Remix's code splitting capabilities allow for efficient loading of application code, further enhancing performance and improving the overall user experience. See below:

‍