Disabling JavaScript

Disabling JavaScript

Do you ever look at a page on your site and think "why are we loading all of this JavaScript? There's nothing on this page but links!" This may seem a little odd for a JavaScript framework, but you can easily turn off JavaScript with a boolean and your data loading, links, and even forms will still work.

Here's how we like to do it:

Open up each route module you want to include JavaScript for and add a "handle". This is a way for you to provide any kind of meta information about a route to the parent route (as you'll see in a moment).

export const handle = { hydrate: true };

Now open root.tsx, bring in useMatches and add this:

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

export default function App() {
  const matches = useMatches();

  // If at least one route wants to hydrate, this will return true
  const includeScripts = matches.some(
    (match) => match.handle?.hydrate

  // then use the flag to render scripts or not
  return (
    <html lang="en">
        <Meta />
        <Links />
        <Outlet />
        {/* include the scripts, or not! */}
        {includeScripts ? <Scripts /> : null}

All of your data loading will still work on the server render, and all of your <Link>s render normal <a> underneath, so they will continue to work.

On any page, at anytime, you can flip between plain HTML and full client-side transitions.

If you need one tiny bit of interactivity, use a <script dangerouslySetInnerHTML>.

return (
    <select id="qty">
      <option value="contact">
        Contact Sales for more

        __html: `
          document.addEventListener('DOMContentLoaded', () => {
            document.getElementById('qty').onchange = (event) => {
              if (event.target.value === "contact") {
Docs and examples licensed under MIT