Link features vs mode

[Mboulianne]

👋🏻 Hello all,

When I navigate to this page:
https://reactrouter.com/api/components/Link

I see that some features are supported only for mode X. I'd like to know if it means not YET available for mode X, or won't ever be available for mode X.

For example, I'm looking at prefetching right now :). I'd be very happy if it was made available in data mode, but it isn't.

Have a great day!

[sergiodxa]

If a feature could be supported in a lower level mode, it would most likely have been supported already, in case of prefetching the way it works by using HTML <link> tags means it's not possible to support it with data or declarative mode.

• In declarative mode there's nothing to prefetch (there are not loaders).
• In data mode loaders run client-side (unless you came with a custom SSR setup) so it's not possible to prefetch it the same way

That doesn't mean you can't do it yourself, it's just not implemented by RR automatically, you can also manually call your loaders. Same way in declarative mode if you use something like TanStack Query you can always use TSQ prefetching features.

[Mboulianne]

Alright so prefetch="intent" is meant to preload the data only then? I thought it was going to preload the assets + the data when set to true.

Prefetching assets make a lot of sense. when running client side. I guess I'll have to write something by hand then

[sergiodxa]

It preloads both data and assets, assets preloading is enabled because the route knows about them, because it knows about the bundlers.

In data mode the router knows nothing about your bundlers and therefore it knows nothing about your assets.

[Mboulianne]

@sergiodxa However, one more question.

I use lazy like this:

{
        index: true,
        lazy: async () => {
          const Component = (await import("./pages/formPage/formPage")).FormPage;
          return { element: <Component /> };
        }, 
},

and it does load the route when I navigate to it... so what is stopping you to give a behaviour to the link on mouse hover and call the lazy function on link hover instead of on navigation only?

Also, is there a way I could find the route based on the link URL and have access to the lazy function and call it by hand?