Progressive enhancement in Remix - Step-by-Step Execution

Concept Flow - Progressive enhancement

Start with basic HTML

↓

Add CSS for styling

↓

Add JavaScript for interactivity

↓

Enhance with Remix loaders/actions

↓

Ensure core content works without JS

↓

Add client-side enhancements

↓

Final: Fully enhanced app with fallback

Progressive enhancement starts with simple HTML, then adds CSS and JavaScript step-by-step, ensuring the app works even if some features are missing.

Execution Sample

Remix

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

export const loader = async () => {
  return { message: "Hello from server" };
};

export default function Page() {
  const data = useLoaderData();
  return <h1>{data.message}</h1>;
}

This Remix loader fetches data on the server, and the component renders it, working even if JavaScript is disabled.

Execution Table

Step	Action	Server Data	Client JS	Rendered Output
1	Request page	Loader runs, returns { message: 'Hello from server' }	No JS yet	HTML with <h1>Hello from server</h1> rendered
2	Browser receives HTML	Data present in HTML	JS loads	Page shows message, no interactivity yet
3	JS hydrates page	Data still from loader	JS enhances UI	Page ready for client-side updates
4	User disables JS	Loader still runs	No JS	Page still shows <h1>Hello from server</h1>
5	User enables JS	Loader runs again if needed	JS active	Page fully interactive
6	Exit	End of flow	End of flow	Page works with or without JS

💡 Execution stops after full page render with or without JavaScript, ensuring progressive enhancement.

Variable Tracker

Variable	Start	After Step 1	After Step 3	After Step 5	Final
data	undefined	{ message: 'Hello from server' }	{ message: 'Hello from server' }	{ message: 'Hello from server' }	{ message: 'Hello from server' }
JS status	not loaded	not loaded	loaded	loaded	loaded or disabled

Key Moments - 2 Insights

Why does the page still show content when JavaScript is disabled?

Because the loader runs on the server and sends HTML with data, as shown in execution_table step 4, so the page works without JS.

How does Remix add interactivity without breaking the basic content?

JS hydrates the server-rendered HTML (step 3), enhancing UI without removing the original content, ensuring progressive enhancement.

Visual Quiz - 3 Questions

Look at the execution table, what is the rendered output at step 2?

A HTML with <h1>Hello from server</h1>

B Empty page with no content

C Page with loading spinner

D Page with error message

💡 Hint

Check the 'Rendered Output' column at step 2 in the execution_table.

At which step does JavaScript first enhance the UI?

A Step 1

B Step 3

C Step 4

D Step 6

💡 Hint

Look at the 'Client JS' column to see when JS loads and enhances UI.

If JavaScript is disabled, what happens to the variable 'data'?

A It becomes undefined

B It is replaced with an error

C It is still available from the server loader

D It is fetched from client-side API

💡 Hint

Refer to variable_tracker for 'data' and execution_table step 4.

Concept Snapshot

Progressive enhancement means:
- Start with basic HTML content
- Add CSS for style
- Add JavaScript for interactivity
- Use Remix loaders to fetch server data
- Ensure page works without JS
- Enhance UI when JS is available

Full Transcript

Progressive enhancement in Remix starts by rendering basic HTML with server data using loaders. The page shows meaningful content even if JavaScript is disabled. Then CSS styles the page, and JavaScript hydrates the HTML to add interactivity. This approach ensures the app works for all users, regardless of their browser capabilities or settings. The execution table shows each step from server data loading to client-side enhancement. Variables like 'data' hold server data throughout, and JavaScript status changes from not loaded to loaded or disabled. Key moments clarify why content shows without JS and how JS enhances without breaking the page. The visual quiz tests understanding of these steps. This method creates robust, accessible, and user-friendly web apps.

Practice

1. What is the main goal of progressive enhancement in Remix apps?

easy

A. Make the app work with basic features first, then add extras

B. Only support users with JavaScript enabled

C. Load all data on the client side after page load

D. Use complex JavaScript frameworks for all features

Solution

1. Step 1: Understand progressive enhancement concept

   Progressive enhancement means starting with a simple, working version of the app that works without JavaScript or advanced features.

2. Step 2: Compare options to this concept

   Make the app work with basic features first, then add extras matches this idea by focusing on basic features first, then adding extras. Other options rely on JavaScript or complex frameworks only.

3. Final Answer:

   Make the app work with basic features first, then add extras -> Option A

4. Quick Check:

   Progressive enhancement = basic first, then extras [OK]

Hint: Remember: start simple, add features later [OK]

Common Mistakes:

• Thinking progressive enhancement means only using JavaScript
• Believing all data must load on client side
• Confusing with single-page app behavior

2. Which of the following is the correct way to provide fallback content for users without JavaScript in Remix?

easy

A. Enable JavaScript.

B.

C. Enable JavaScript to continue.

D. Your browser needs JavaScript enabled.

Solution

1. Step 1: Identify HTML tag for no-JavaScript fallback

   The <noscript> tag is the standard HTML way to show content only when JavaScript is disabled.

2. Step 2: Check other options for correctness

   Options B, C, and D use invalid or non-standard tags or scripts that won't work as fallback content.

3. Final Answer:

   <noscript>Your browser needs JavaScript enabled.</noscript> -> Option D

4. Quick Check:

   Fallback for no JS = <noscript> [OK]

Hint: Use <noscript> tag for no-JS fallback content [OK]

Common Mistakes:

• Using custom or invalid tags for fallback
• Trying to detect JS with scripts inside fallback
• Not providing any fallback content

3. Given this Remix loader code, what will the user see if JavaScript is disabled?

export async function loader() {
  return { message: 'Hello from server' };
}

export default function Greeting() {
  const data = useLoaderData();
  return <div>{data.message}</div>;
}

medium

A. The page reloads infinitely

B. The message 'Hello from server' is shown

C. An error message appears

D. Nothing is shown because JavaScript is disabled

Solution

1. Step 1: Understand Remix loader and server rendering

   The loader runs on the server and sends data to the component before rendering the page.

2. Step 2: Consider no JavaScript scenario

   Since Remix renders on the server, the user sees the server-rendered HTML with the message even if JavaScript is off.

3. Final Answer:

   The message 'Hello from server' is shown -> Option B

4. Quick Check:

   Server data shows without JS = message visible [OK]

Hint: Loader data renders server-side, visible without JS [OK]

Common Mistakes:

• Assuming no output without JavaScript
• Confusing client-side hooks with server data
• Thinking loader runs only on client

4. What is wrong with this Remix component if the goal is progressive enhancement?

export default function Page() {
  React.useEffect(() => {
    fetch('/api/data').then(res => res.json()).then(console.log);
  }, []);
  return <div>Loading...</div>;
}

medium

A. It does not fetch data on the server, so no content without JavaScript

B. The useEffect hook runs on the server causing errors

C. The fetch URL is incorrect for Remix loaders

D. The component returns invalid JSX

Solution

1. Step 1: Analyze data fetching method

   The component fetches data only inside useEffect, which runs only in the browser after load.

2. Step 2: Check progressive enhancement impact

   Without JavaScript, useEffect never runs, so no data is fetched or shown, breaking progressive enhancement.

3. Final Answer:

   It does not fetch data on the server, so no content without JavaScript -> Option A

4. Quick Check:

   Client-only fetch breaks no-JS support [OK]

Hint: Fetch data in loaders, not useEffect, for no-JS support [OK]

Common Mistakes:

• Thinking useEffect runs on server
• Ignoring no-JS users
• Assuming fetch URL alone fixes enhancement

5. You want to build a Remix page that shows a list of items fetched from the server and also allows client-side filtering with JavaScript. Which approach best follows progressive enhancement?

hard

A. Render static list in HTML and fetch items on client to replace it

B. Fetch items only in useEffect and render empty list server-side

C. Fetch items in the loader and render them server-side; add client filtering with useState and input events

D. Use only client-side rendering with React and no server loader

Solution

1. Step 1: Identify server-side data fetching

   Fetching items in the loader ensures the list is rendered on the server and visible without JavaScript.

2. Step 2: Add client-side filtering

   Using useState and input events for filtering adds extra features for users with JavaScript, enhancing the experience.

3. Step 3: Evaluate other options

   The other options fail to show data server-side or rely only on client JS, breaking progressive enhancement.

4. Final Answer:

   Fetch items in the loader and render them server-side; add client filtering with useState and input events -> Option C

5. Quick Check:

   Server fetch + client filter = progressive enhancement [OK]

Hint: Load data server-side, enhance with client JS features [OK]

Common Mistakes:

• Fetching data only on client side
• Not rendering initial data server-side
• Ignoring progressive enhancement principles