<Link>
API to help with resource preloading
#8012
Replies: 2 comments 10 replies
-
I don't think that the My proposal is to add a Anyway, I think we could do both: generally preload stuff via the callback defined in a |
Beta Was this translation helpful? Give feedback.
-
I would also like to know if there are any advancements in this? Is it not possible to extend |
Beta Was this translation helpful? Give feedback.
-
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
Next.js
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
andNavLink
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:
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:
The Implementation
Right now in Remix the idea of intent is pretty basic:
But I'd like to improve it and I have a few wild ideas:
document.activeElement
is one or two away from the link, do the prefetchMy Questions
<Link>
directly in React Router?Thanks!
Beta Was this translation helpful? Give feedback.
All reactions