Add onPrefetch to Link

[ryanflorence]

We can prefetch loader data because we simply use html <link rel="prefetch" /> and then the browser manages the cache with HTTP. We get feature requests to prefetch client loaders too but then we'd need a cache to store them (and expire them) etc.

Instead, I think we can add a very simple event to links: onPrefetch.

Apps can simply do whatever they'd like there, probably call prefetch on whatever cache they're using (like React Query).

// client loader uses fetchQuery already
export async function clientLoader({ params }) {
  return queryClient.fetchQuery({
    queryKey: ["notes", params.id],
    queryFn: getNotes,
  });
}

// links can prefetch anything they need to
<Link
  to="/notes"
  prefetch="intent"
  onPrefetch={() => {
    queryClient.prefetchQuery({
      queryKey: ["notes", "abc"],
      queryFn: getNotes,
    });
  }}
/>;

This way we can still prefetch the JS modules and they can prefetch everything else.

Signature

I don't think it needs any arguments because they should have everything they need in scope already:

notes.map(note => (
  <Link
    to={note.id}
    prefetch="intent"
    onPrefetch={(eventStub) => {
      if (whatever) eventStub.preventDefault()
      queryClient.prefetchQuery({
        // know the ID already, don't need params
        queryKey: ["notes", id],
        queryFn: getNotes,
      });
    }}
  />
));

[jgoz]

Within data routers (library mode), it would be super cool if the default prefetch behavior was to invoke the loader for the target href. onPrefetch, if defined, would take precedence.

This would encapsulate data loading particulars within the route and encourage the pattern of fetching/prefetching in the loader to prime the cache, closer to where the query results are used.

But this could totally be a userland thing too:

function useLinkPrefetcher({ to, prefetch }: Pick<LinkProps, 'to' | 'prefetch'>, key?: string) {
  const href = useHref(to);
  const { load } = useFetcher({ key: key ?? `preload/${to}` });

  return useMemo(() => {
    return prefetch ? () => load(href) : undefined;
  }, [href, load, prefetch]);
}

[dantrain]

Great that this is being proposed!

they should have everything they need in scope already

I don't think this is necessarily a safe assumption. There could be things in scope in the route module available to be used in the client loader that are not in scope everywhere a <Link> is used.

It would be great to have the option to call the client loader if desired, for instance if queryClient.prefetchQuery() is sufficient for both navigation and prefetching cases.

[brophdawg11]

Related/Duplicate Proposal: #14187

[brophdawg11]

We are going to move forward with this. Adding the accepting prs label if anyone from the community wants to take a stab at this, but otherwise one of us will try to pick this up before long.

[jacob-ebey]

👍

[markdalgleish]

👍

[jin-Pro]

@brophdawg11

I was the one who reported issue #14187.

I want not only Link, but also Routes definitions to support 'relations' or 'prefetch', so that when a page is loaded, the related lazy components are loaded together.

I wanted to contribute this feature myself, but since my skills aren’t quite there yet, I’ll just keep an eye on it for now.

[brophdawg11]

You can already handle page component load behaviors with route.lazy?

If we moved this to the route level, then there would need to be an additional required route matching step before we could call onPrefetch which wouldn't be necessary in all cases if you already know exactly what prefetch logic you wanted to run. Putting it on the Link also allows it to be conditional more easily, and avoids having to pass parameters to a route.prefetch() handler that you need to then conditionally prefetch based on.

FWIW, I think this API will allow you to do what you're looking for in user land too:

let reouter = creteBrowserRouter([{
  path: '/',
  loader() { ... },
  handle: {
    prefetch() { ... }
  }
}]);

// Then in your app
<Link 
  to="/path" 
  prefetch="intent" 
  onPrefetch={() => matchRoutes(router.routes)?.forEach(m => m.handle?.prefetch())}
>

[brophdawg11]

Related proposal closed in favor of this one #8012

[ariesclark]

Suggestion: Route-level preloading.

Rather than placing preloading logic in the Link component, I believe this functionality should be exported from routes themselves. This ensures that every reference to a route automatically preloads, eliminating the need to wrap React Router's Link component in userland.

Here's an implementation using the https://reactrouter.com/start/framework/route-module#handle:

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>
  );
}

[brophdawg11]

We should not assume that users want automatic preloading. As mentioned above, the more granular Link API we are proposing allows fine grained preloading as well as automatic preloading with a small user-land wrapper.

[akrynski-1]

Will there be an option to simply call the loader? I think many tanstack query users (including me) would appreciate not having to duplicate data loading code