Progressive enhancement in Remix - Deep Dive

Overview - Progressive enhancement

What is it?

Progressive enhancement is a way to build web apps so they work well for everyone, even if some features or technologies are missing. It starts with a simple, basic version that works everywhere, then adds extra features for browsers or devices that support them. This approach makes sure users always get a usable experience, no matter their setup. In Remix, it means building apps that load fast and work without JavaScript, then enhance with richer interactivity.

Why it matters

Without progressive enhancement, users with slow connections, older browsers, or disabled JavaScript might get broken or unusable apps. This hurts accessibility and user satisfaction. Progressive enhancement ensures everyone can access core content and functionality, improving reach and reliability. It also helps apps load faster and be more resilient to errors or network issues, making a better experience for all users.

Where it fits

Before learning progressive enhancement, you should understand basic web development: HTML, CSS, and JavaScript. Knowing how Remix handles routing and data loading helps too. After mastering progressive enhancement, you can explore advanced Remix features like server actions, client-side transitions, and optimizing performance with caching and streaming.

Mental Model

Core Idea

Build a simple, fully functional base first, then add extra features that improve the experience only if the user’s browser supports them.

Think of it like...

It’s like building a sturdy house with basic walls and a roof first, then adding fancy decorations and smart gadgets only if the homeowner wants and can afford them.

┌───────────────────────────────┐
│       Progressive Enhancement  │
├───────────────┬───────────────┤
│ Basic Content │ Enhanced UI   │
│ (HTML only)   │ (JS, CSS)     │
├───────────────┼───────────────┤
│ Works everywhere │ Extra features │
│ Simple & fast  │ Better UX     │
└───────────────┴───────────────┘

Build-Up - 7 Steps

1

Foundation

Understanding basic web content

Concept: Learn that web pages start with simple HTML that all browsers can read.

Every web page has basic content written in HTML. This content is what users see first and what search engines read. It includes text, images, and links. This basic content works even if JavaScript or CSS is turned off or not supported.

Result

You get a simple, readable page that works everywhere, even on old browsers or devices with limited features.

Understanding that HTML is the foundation ensures you build apps that are accessible and reliable for all users.

2

Foundation

Adding styles and interactivity

Concept: Introduce CSS and JavaScript as ways to improve the look and behavior of the page without breaking the basic content.

CSS styles make the page look nicer, and JavaScript adds interactive features like buttons that respond to clicks. But if these fail or are missing, the basic HTML content still shows and works.

Result

Users with modern browsers get a richer experience, while others still see the core content.

Knowing that styles and scripts enhance but don’t replace content helps prevent building fragile apps that break easily.

3

Intermediate

Progressive enhancement in Remix loaders

🤔Before reading on: do you think Remix loaders run on the client, server, or both? Commit to your answer.

Concept: Remix loaders run on the server to fetch data before rendering, ensuring the page has content even without JavaScript.

In Remix, loaders fetch data on the server and send fully rendered HTML to the browser. This means users get content immediately, even if JavaScript is disabled. JavaScript then enhances the page with client-side features.

Result

Pages load fast with content visible immediately, improving user experience and SEO.

Understanding server-side data loading in Remix is key to building apps that work well with progressive enhancement.

4

Intermediate

Using Remix actions for graceful interactivity

🤔Before reading on: do you think Remix actions require JavaScript to work? Commit to your answer.

Concept: Remix actions handle form submissions on the server, so forms work even without JavaScript.

Forms in Remix submit data to actions on the server. If JavaScript is enabled, Remix can intercept and handle submissions without reloading. If not, the form still submits normally and the server responds with a new page.

Result

Forms remain functional for all users, with enhanced behavior for those with JavaScript.

Knowing that actions provide a fallback for interactivity prevents breaking forms for users without JavaScript.

5

Intermediate

Enhancing UI with client-side transitions

🤔Before reading on: do you think client-side navigation in Remix is mandatory or optional? Commit to your answer.

Concept: Remix adds client-side navigation to speed up page changes, but it’s optional and falls back to full reloads.

When JavaScript is enabled, Remix intercepts link clicks and loads new pages without full reloads, making navigation faster. Without JavaScript, links work normally with full page reloads.

Result

Users get a smooth experience if possible, but no one loses basic navigation.

Understanding optional client-side features helps you build apps that are fast but still reliable.

6

Advanced

Optimizing progressive enhancement with streaming

🤔Before reading on: do you think streaming HTML improves perceived load time or actual load time? Commit to your answer.

Concept: Streaming sends parts of the page to the browser as soon as they’re ready, improving how fast users see content.

Remix supports streaming HTML from the server, so the browser can start rendering content before the whole page is ready. This makes the app feel faster, especially on slow networks.

Result

Users see content sooner, improving perceived performance and engagement.

Knowing how streaming works lets you build apps that feel faster without sacrificing progressive enhancement.

7

Expert

Handling edge cases in progressive enhancement

🤔Before reading on: do you think all JavaScript errors break progressive enhancement? Commit to your answer.

Concept: Progressive enhancement means your app should still work even if some JavaScript fails or is missing.

In Remix, you design components so that if JavaScript crashes or is disabled, the server-rendered HTML still shows core content and forms still submit. You avoid relying on client-only state for critical features.

Result

Your app is resilient, accessible, and reliable under many failure scenarios.

Understanding failure modes helps you build robust apps that serve all users well.

Under the Hood

Remix runs loaders and actions on the server to fetch data and handle form submissions, then sends fully rendered HTML to the browser. The browser displays this immediately. If JavaScript is enabled, Remix hydrates the page, attaching event listeners and enabling client-side navigation and interactivity. This layered approach ensures the app works with or without JavaScript.

Why designed this way?

Remix was designed to combine the reliability of server-rendered apps with the speed and interactivity of client-side apps. Progressive enhancement ensures users get content fast and reliably, while still benefiting from modern features when available. This avoids common problems with single-page apps that break without JavaScript or have slow initial loads.

┌───────────────┐       ┌───────────────┐       ┌───────────────┐
│   Server      │──────▶│  Render HTML  │──────▶│   Browser     │
│ Loaders/Actions│       │  with data    │       │  Displays     │
└───────────────┘       └───────────────┘       └───────────────┘
                                   │
                                   ▼
                        ┌─────────────────────┐
                        │  JavaScript enabled? │
                        └─────────┬───────────┘
                                  │ Yes
                                  ▼
                      ┌─────────────────────┐
                      │  Hydrate & enhance  │
                      │  with client logic  │
                      └─────────────────────┘

Myth Busters - 4 Common Misconceptions

Quick: Does progressive enhancement mean you don’t use JavaScript at all? Commit to yes or no.

Common Belief: Progressive enhancement means avoiding JavaScript entirely to keep things simple.

Reality: Progressive enhancement uses JavaScript to improve the experience but never depends on it for core content or functionality.

Why it matters: Thinking you must avoid JavaScript limits your app’s capabilities and user experience unnecessarily.

Quick: Do you think progressive enhancement only matters for old browsers? Commit to yes or no.

Common Belief: Only outdated browsers need progressive enhancement; modern browsers always support everything.

Reality: Even modern browsers can have JavaScript disabled or fail to load scripts, so progressive enhancement benefits all users.

Why it matters: Ignoring progressive enhancement risks breaking your app for users with strict privacy settings or network issues.

Quick: Does Remix automatically handle all progressive enhancement without developer effort? Commit to yes or no.

Common Belief: Remix apps are always progressively enhanced by default without extra work.

Reality: Remix provides tools, but developers must design their app to work without JavaScript and add enhancements carefully.

Why it matters: Assuming automatic enhancement leads to fragile apps that break when JavaScript fails.

Quick: Is client-side navigation in Remix mandatory for app functionality? Commit to yes or no.

Common Belief: Client-side navigation is required for Remix apps to work properly.

Reality: Client-side navigation is optional and falls back to normal page loads, preserving progressive enhancement.

Why it matters: Misunderstanding this can cause developers to build apps that break without JavaScript.

Expert Zone

1

Remix’s server-first data loading means you can rely on server state for critical features, reducing client complexity.

2

Progressive enhancement requires careful separation of concerns: core HTML for content, CSS for style, and JavaScript only for enhancements.

3

Handling form submissions with Remix actions ensures accessibility and SEO benefits while enabling rich client-side behavior.

When NOT to use

Progressive enhancement is less suitable for apps that require real-time, highly interactive features where JavaScript is mandatory, such as complex games or live collaboration tools. In those cases, client-heavy frameworks or single-page apps might be better.

Production Patterns

In production Remix apps, developers use loaders and actions to ensure server-rendered content and form handling, add client-side navigation for speed, and progressively enhance UI components with React hooks. They also test apps with JavaScript disabled to verify core functionality.

Connections

Graceful degradation

Opposite approach

Understanding progressive enhancement clarifies why graceful degradation starts with a full app and removes features, while progressive enhancement builds up from a simple base.

Accessibility

Builds-on

Progressive enhancement naturally supports accessibility by ensuring content and functionality work without relying on complex scripts or styles.

Modular design in architecture

Similar pattern

Just like modular buildings add features without compromising the base structure, progressive enhancement adds web features without breaking core content.

Common Pitfalls

#1 Relying on JavaScript for critical content rendering.

Wrong approach:

function MyComponent() {
return {window.someData};
} // content depends on JS variable

Correct approach:

export async function loader() {
return { someData: await fetchData() };
}
function MyComponent({ data }) {
return {data.someData};
} // content from server loader

Root cause:

Misunderstanding that content must be available in the initial HTML for progressive enhancement.

#2 Using client-only navigation without fallback.

Wrong approach:

{ e.preventDefault(); navigate('/page'); }}>Go // no fallback for no JS

Correct approach:

Go // normal link works with or without JS

Root cause:

Forgetting that links must work normally if JavaScript is disabled.

#3 Not testing app without JavaScript.

Wrong approach:

Only testing Remix app with JS enabled in browser.

Correct approach:

Testing app with JS disabled to ensure core content and forms work.

Root cause:

Assuming modern browsers always run JavaScript and ignoring fallback scenarios.

Key Takeaways

Progressive enhancement means building a solid, simple base that works everywhere before adding extra features.

Remix supports progressive enhancement by rendering content on the server and enhancing it on the client if possible.

Designing forms and navigation to work without JavaScript ensures accessibility and reliability.

Testing your app with JavaScript disabled reveals how well you’ve applied progressive enhancement.

Understanding progressive enhancement helps you build faster, more resilient, and inclusive web applications.