<Link> API to help with resource preloading

[ryanflorence]

Background

A lot of frameworks do some resource preloading around links. This makes the transition to the next page super fast.

The tradeoff though is fetching a bunch of stuff for pages the user doesn't actually visit in order to make the transition to the pages they do visit super fast. For example, a few implementations in the wild are:

• Gatsby

  • When a link is within the viewport it fetches the JavaScript bundles (and some pieces of their build manifest)
  • When you hover a link it appears to do it again
  • If you scroll to the bottom of gatsbyjs.com, all those footer links automatically download 3.2MB of JavaScript, 550kb transferred
  • The total network activity for JS and page data caused by scrolling to the bottom after page load is about 7MB

• Next.js

  • When a link is in the viewport it fetches JS bundles and page data (for getStaticPaths, not getServerSideProps) and appears to fetch some CSS too.
  • When you scroll down vercel.com you end up with an additional 4MB of JavaScript and page data

The transitions to the clicked links are super fast, but there's a lot of network activity to get there.

API Proposal <Link onIntent />

In Remix we're about to ship some new stuff that preloads a link's page on "intent" rather than simply rendering in the viewport. Remix has to wrap Link and NavLink with our own set of event handlers to make it work.

I'm thinking this use case could be baked into React Router, because any React Router app might want to preload resources even if they're not using Remix.

Here's what I'm thinking for the API:

<Link onIntent={cb} />

Then, no matter how you load your data for your react router app, you could make your transition to the link super fast by preloading like so:

function ArticleLink({ article }) {
  let [preload, setPreload] = useState(false);

  return (
    <>
      <Link
        onIntent={() => setPreload(true)}
        to={`/articles/${article.slug}`}
        children={article.title}
      />
      {preload && (
        <>
          <link
            rel="preload"
            as="fetch"
            href={`/api/articles/${article.slug}.json`}
          />
          <link rel="preload" as="image" href={article.bannerImageUrl} />
        </>
      )}
    </>
  );
}

The Implementation

Right now in Remix the idea of intent is pretty basic:

• mouse enter
• focus
• touch start

But I'd like to improve it and I have a few wild ideas:

• instead of focus, if the document.activeElement is one or two away from the link, do the prefetch
• instead of mouseenter
  • if the mouse is moving toward the link
  • and the speed is decellerating
  • do the prefetch
  • this would
    • prevent fast mouseovers from prefetching
    • start prefetches earlier than mouseenter, increasing the chance of a full prefetch before they click!

My Questions

• What do you think of adding a generic API to help with prefetching around <Link> directly in React Router?
• Do you know of any libraries or implementations as described in the section above to look to as prior art?

Thanks!

[MeiKatz]

I don't think that the <Link /> component is the right spot for this feature. If we know where <Link /> points to we also know the matching route. If we put the preloading to the <Link /> component we have to put in on every occurrence of a link. If we put it in a <Route /> component we have it for every link the points towards this route.

My proposal is to add a onPreload property to <Route /> that is a callback. The callback is called if any link towards this route was detected as intent. How the intent is defined is another problem, that could implemented in many ways, like the ones you pointed out.

Anyway, I think we could do both: generally preload stuff via the callback defined in a <Route />, for the stuff that is not handled by this use onIntent in a <Link />.

[ryanflorence]

We'll be bringing over data loading from Remix into React Router, so route will have things like <Route loader /> for loading data (or anything else when visiting the route), but almost always that information is in a code split bundle that the <Link> points to, so at a very minimum, you have to fetch the code first before you even know what is going to be in that route's loader.

This gives you a way to get started before we even call the function on the route.

[infoxicator]

@ryanflorence now that React Router 6.4 has been released, have there been any updates on prefetching for Client Side Apps that don't use remix?

[KerimG]

I would also like to know if there are any advancements in this? Is it not possible to extend <Link> to run the linked routes loader when it's in the viewport?

[brophdawg11]

Agreed! (note that Ryan filed the original proposal 😉 ). Hopefully we'll get to it once we get Remix v2 out the door but until then the above approach can serve as a workaround.

[akamfoad]

I guess Remix SPA resolves this request to rest isn't? since Remix's link component supports prefetch prop and functionality?

[piotrblasiak]

Does this really work tho? routes is not accessible in sub components, and it feels unreliable to pass it down myself - as I assume it may not be stored in it's original form in react router itself so changing it after having createBrowserRouter etc may not be a good thing?

[Meess]

@brophdawg11 seems like the codesandbox is not live anymore, do you have the POC somewhere publiclay visible? Curious to see your solution, as the scenario that I can imagine is to do matchRoutes and calling the exported loader function manually with correct parameters.

My goal: prefetch data onMouseDown, and as most data fetching happens in the loader to call the loader onMouseDown while navigating onClick (or on mouseUp on the same element)

[brophdawg11]

here's the JS from the code sandbox

import * as React from "react";
import * as ReactClient from "react-dom/client";
import {
  createBrowserRouter,
  Link,
  matchRoutes,
  Outlet,
  RouterProvider,
  useLoaderData,
  useNavigation
} from "react-router-dom";

let cache = {
  data: {},
  get(k) {
    let data = cache.data[k];
    if (data?.expires > Date.now()) {
      return data.value;
    }
    delete cache.data[k];
    return null;
  },
  set(k, v, ms) {
    cache.data[k] = {
      value: v,
      expires: Date.now() + ms
    };
  }
};

const routes = [
  {
    path: "/",
    Component() {
      let navigation = useNavigation();
      return (
        <>
          <p>Navigation state: {navigation.state}</p>
          <Link to="/">Home</Link>
          {" | "}
          <PrefetchedLink to="/page">Page</PrefetchedLink>
          <Outlet />
        </>
      );
    },
    children: [
      {
        index: true,
        Component() {
          return <h1>Hello React Router</h1>;
        }
      },
      {
        path: "/page",
        async loader() {
          let cached = cache.get("page");
          if (cached) {
            console.log("returning value from cache");
            return cached;
          }

          console.log("computing new value to put into the cache");
          // Fake slow loader value generation
          let promise = new Promise((r) =>
            setTimeout(() => r(new Date().toISOString()), 2000)
          );
          // Stick a promise in the cache synchronously so repeated
          // loader executions can use it
          cache.set("page", promise, 5000);
          return promise;
        },
        Component() {
          let data = useLoaderData();
          return (
            <>
              <h1>Hello Page</h1>
              <p>Data: {data}</p>
            </>
          );
        }
      }
    ]
  }
];

const router = createBrowserRouter(routes);

ReactClient.createRoot(document.getElementById("root")).render(
  <RouterProvider router={router} />
);

function PrefetchedLink({ to, children }) {
  let runLoaders = React.useCallback(() => {
    let nextMatches = matchRoutes(routes, to);
    nextMatches.forEach((m) =>
      m.route.loader?.({ request: new Request(to), params: m.params })
    );
  }, [to]);

  return (
    <Link to={to} onMouseOver={() => runLoaders()}>
      {children}
    </Link>
  );
}

[ariesclark]

A similar workaround as @brophdawg11, with support for framework mode, but instead utilizing the handle export.

In your route file:

export const handle = {
  async intent() {
    // do anything.
  }
};

export default function Component() { /* ... */ }

In your link component:

import { Link, matchRoutes } from "react-router";

function IntentfulLink({ to, children }) {
  let intent = React.useCallback(async () => {
    // @ts-expect-error: React Router internal.
    const matches = matchRoutes(globalThis.__reactRouterDataRouter.routes, to) || [];

    await Promise.all(matches.map(async ({ route }) => {
      // @ts-expect-error: React Router internal.
      const handle = route.handle || await route.lazy?.handle();
      if (!handle || typeof handle !== "object" || !handle.intent) return null;

      return handle.intent();
    }));
  }, [to]);

  return (
    <Link to={to} onMouseOver={intent}>
      {children}
    </Link>
  );
}