Progressive Enhancement in Remix: What It Is and How It Works

In Remix, progressive enhancement means building web apps that work fully with just server-rendered HTML and then add client-side JavaScript for extra interactivity. This approach ensures your app loads fast and works even if JavaScript is slow or disabled, improving accessibility and user experience.

How It Works

Progressive enhancement in Remix works by first delivering a fully functional HTML page rendered on the server. This is like giving someone a printed map before handing them a GPS device. The user can navigate the site immediately without waiting for extra scripts.

Then, Remix adds client-side JavaScript to enhance the page with faster navigation and interactive features, similar to how a GPS adds real-time directions on top of the map. If JavaScript is slow or unavailable, the user still has a working site.

This method balances speed, accessibility, and rich interactivity by layering enhancements on a solid, simple foundation.

Example

This example shows a Remix route that renders a list of items on the server and then uses client-side JavaScript to add a button that filters the list without reloading the page.

jsx

import { useLoaderData } from "@remix-run/react";
import { useState } from "react";

export async function loader() {
  return ["Apple", "Banana", "Cherry", "Date"];
}

export default function FruitList() {
  const fruits = useLoaderData();
  const [showA, setShowA] = useState(false);

  const filteredFruits = showA ? fruits.filter(f => f.startsWith("A")) : fruits;

  return (
    <main>
      <h1>Fruit List</h1>
      <button onClick={() => setShowA(!showA)} aria-pressed={showA}>
        {showA ? "Show All" : "Show Only A"}
      </button>
      <ul>
        {filteredFruits.map(fruit => (
          <li key={fruit}>{fruit}</li>
        ))}
      </ul>
    </main>
  );
}

Output

<main>
  <h1>Fruit List</h1>
  <button aria-pressed="false">Show Only A</button>
  <ul>
    <li>Apple</li>
    <li>Banana</li>
    <li>Cherry</li>
    <li>Date</li>
  </ul>
</main>

When to Use

Use progressive enhancement in Remix when you want your app to load quickly and work for everyone, even if JavaScript is slow or disabled. It is great for public websites, blogs, or apps where accessibility and SEO matter.

It also helps when you want to add rich interactivity without sacrificing the basic functionality or speed. For example, e-commerce sites can show product pages immediately and then enhance with filters or carts using JavaScript.

Key Points

• Start with server-rendered HTML for fast, accessible pages.
• Add client-side JavaScript to enhance interactivity progressively.
• Ensures app works even if JavaScript is disabled or slow.
• Improves SEO and user experience by layering enhancements.

Key Takeaways

Progressive enhancement in Remix delivers fully functional server-rendered pages first.

Client-side JavaScript adds interactivity without breaking basic functionality.

This approach improves speed, accessibility, and SEO.

Use it when you want reliable, fast-loading apps that work for all users.