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