Learn Remix - History, Background & Why You Need Remix

#Introduction

In episode 0 you set up your environment. Now it's time to understand where Remix comes from and why this framework is worth learning. Every technology is born from a specific problem, and Remix was born from a long-standing frustration with how modern web applications are built.

Remix was created by Michael Jackson and Ryan Florence — two names that are no strangers to the React ecosystem, because they are also the creators of React Router, the most widely used routing library for React. Their experience building routing led them to a big question: why do modern web applications feel slower and more fragile than the simple, classic web?

Episode 1 is your mental foundation. By understanding the history and philosophy, all the technical concepts in the upcoming episodes — loaders, actions, nested routes, progressive enhancement — will feel logical, not just features to memorize.

#From React Router to Remix

#The Birth of Remix

Remix was first announced as a private beta in 2020. At that time, the architecture it championed felt counter to the current: most developers were moving to pure SPAs, while Remix was bringing computation back to the server. This closed beta ran for almost a year, and the team invited the community to try the loader, action, and nested route patterns before going open source.

#Open Source and the Shopify Acquisition

In November 2021, Remix officially became open source under the MIT license. A year later, in October 2022, Remix was acquired by Shopify — the e-commerce giant that uses React on a massive scale. This acquisition secured full-time development funding, and Remix's position as React's official full-stack framework for large web platforms grew even stronger.

#Remix v2 and v3

Remix v2 was released in November 2023 with a number of modernizations: full Vite support, route conventions without needing to memorize old rules, and remix.config.js beginning to be replaced by vite.config.ts. Then, in November 2024, Remix v3 was released with a historic unification: Remix merged with React Router v7.

npm view remix versions --json
npm view create-remix time --json

With this unification, npm view create-remix time --json shows the official release dates of the scaffolder. The same team manages a single routing foundation, so any innovation in React Router is immediately available in Remix.

Here's a summary of the milestones you should remember:

• 2020: Remix is announced as a private beta.
• 2021: Remix goes open source under the MIT license.
• 2022: Remix is acquired by Shopify.
• 2023: Remix v2 is released, with full Vite support.
• 2024: Remix v3 is released, merging with React Router v7.

#The Server-First Philosophy

#Data Loading on the Server

Remix's core philosophy reads: the server holds the data. Instead of writing a separate REST API and calling it from the client, Remix uses a loader function that runs on the server and sends data directly to the component. The browser receives HTML that already contains data, not an empty page waiting for a fetch.

#Progressive Enhancement

Remix believes applications should work even without JavaScript on the client side. Because navigation uses the a tag and forms use the plain form tag, Remix reuses the browser's native behavior as its foundation. JavaScript is only an enhancement: smooth navigation, fast validation, and optimistic UI. This pattern is called progressive enhancement.

#The Problems It Solves

#Simplifying Data Loading and Server Fetching

In an SPA architecture, a single page often requires several states: loading, error, and success, each with its own code. Remix moves that responsibility to the server. A single loader function runs when the page is requested, and its result is available before the component renders. Remix handles the loading and error flow at the server layer, so components focus on rendering.

Loader sending data to a component

import { useLoaderData } from "@remix-run/react";
 
export async function loader() {
  const data = { nama: "Belajar Remix", totalEpisode: 24 };
  return data;
}
 
export default function Beranda() {
  const data = useLoaderData();
  return <h1>Series {data.nama}</h1>;
}

Notice that the loader returns a plain object — since Remix v3 with single fetch, it's no longer mandatory to wrap it with the json helper. It's this combination of loader and useLoaderData that replaces useEffect fetch in SPAs.

#Nested Routing and Better UX

Remix uses nested routing: a URL isn't just mapped to a single page, but to a hierarchy of layouts. Persistent parts of a page, like a sidebar, are rendered only once and don't need to be re-rendered on navigation. As a result, only the data from the parts that actually change gets reloaded. This produces navigation that feels instant and bandwidth-efficient.

#An Alternative to Pure SPAs and Traditional SSR

Remix sits in the middle of the spectrum. Pure SPAs are weak in SEO, first load, and accessibility; classic server-rendered frameworks are weak in interactivity and state. Remix combines the two: HTML is rendered on the server, then hydrated into a fully interactive application. You get the best of both worlds without writing two applications.

#Positioning Remix in the Framework Landscape

Today Remix competes in the same category as Next.js and SvelteKit. The main difference is its fidelity to the web model: Remix intervenes less in the native request-response flow and relies heavily on explicit route conventions. Many developers choose Remix when they want full control over HTTP, caching, and streaming — topics we'll start covering in episode 8.

It's also worth noting Remix's position relative to React Router. Since both are now maintained by the same team, the routing skills you learn here remain valid if you build React applications without a full framework. Mastering Remix also means mastering React Router, two complementary skills in the job market.

To close this discussion: don't get stuck in the debate over which framework is fastest. The performance differences between modern frameworks are generally small compared to the impact of your own architectural decisions. Focus on understanding Remix's mental model — that's where the long-term value lies.

For developers just starting out, the practical decision is simple: if you're already comfortable with React and want to understand web architecture thoroughly, Remix is an excellent learning choice. The series of design decisions Remix makes will teach you how the web actually works.

#Conclusion

Episode 1 gives you context: Remix was born from the experience of building React Router, went open source in 2021, was acquired by Shopify in 2022, and since v3 has merged with React Router v7. Its server-first and progressive enhancement philosophy answers the weaknesses of both pure SPAs and traditional SSR.

The key takeaways:

• Remix was built by Michael Jackson and Ryan Florence, the creators of React Router.
• Remix went open source in 2021 and was acquired by Shopify in 2022.
• Remix v3 merges with React Router v7, one team managing a single routing foundation.
• Server-first philosophy: loaders run on the server, the client receives HTML that already contains data.
• Progressive enhancement: the application works without JavaScript and improves when JavaScript is enabled.
• Nested routing makes navigation feel instant and bandwidth-efficient.

In the next episode, episode 2, we'll discuss Remix's core concepts and main architecture — how filesystem-based routing works, the role of loader and action as server-side data handlers, the flow of server rendering versus client hydration, and the main components in a Remix project. Prepare your server-first mindset, because from here on we're getting into the actual engine of Remix.