Progressive enhancement in Remix

Introduction

Progressive enhancement means making your web app work well for everyone, even if some features or scripts don't load. It helps users get the basic content and functions first, then adds extra features if possible.

When you want your website to work even if JavaScript is disabled or slow.

When you want to improve user experience step-by-step, starting with simple content.

When you want your app to be accessible on older browsers or devices.

When you want search engines to easily read your content.

When you want to avoid breaking your app if some advanced features fail.

Syntax

Remix

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

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

export default function Component() {
  const data = useLoaderData();
  return (
    <main>
      <h1>{data.message}</h1>
      <noscript>
        <p>Please enable JavaScript for a better experience.</p>
      </noscript>
    </main>
  );
}

The loader function runs on the server and sends data to the component.

The <noscript> tag shows content only if JavaScript is off.

Examples

Basic loader sending a greeting message to the component.

Remix

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

export function loader() {
  return { greeting: 'Welcome!' };
}

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

Use <noscript> to provide fallback content for users without JavaScript.

Remix

<noscript>
  <p>This message shows only if JavaScript is disabled.</p>
</noscript>

Shows a button that works only if JavaScript is enabled, with fallback text otherwise.

Remix

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

export default function Component() {
  const data = useLoaderData();
  return (
    <>
      <h1>{data.message}</h1>
      <button onClick={() => alert('Clicked!')}>Click me</button>
      <noscript>
        <p>Enable JavaScript to use the button.</p>
      </noscript>
    </>
  );
}

Sample Program

This Remix component uses a server loader to send a message. It shows the message always. If JavaScript is off, the <noscript> message tells the user to enable it for more features.

Remix

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

export function loader() {
  return { message: 'Hello from Remix!' };
}

export default function Greeting() {
  const data = useLoaderData();
  return (
    <main>
      <h1>{data.message}</h1>
      <noscript>
        <p>Please enable JavaScript to see interactive features.</p>
      </noscript>
    </main>
  );
}

Important Notes

Progressive enhancement helps your app work for everyone, no matter their device or settings.

Always provide meaningful content in the server loader so users see something useful without JavaScript.

Use <noscript> to gently guide users who have JavaScript disabled.

Summary

Progressive enhancement means building your app to work first with basic features, then adding extras.

Use Remix loaders to send server data that works without JavaScript.

Use <noscript> tags to show fallback messages for users without JavaScript.