Pre-emptively Load Links with Remix prefetch
When trying to load data on slow networks, it can get aggravating for your users. On our posts page, we have several links to each of our posts. Because Remix knows all of the CSS, JavaScript, and data that is needed by just looking at the URL, we can tell Remix to start fetching that when someone hovers over one of the links.
Link, from Remix, has a special prop on it called prefetch. It has three different options on it. We are going to utilize intent for when the user shows intent to navigate to a page.
Kent C. Dodds: [0:00] If we click on any of these posts, it takes a second before we actually get navigated over to the post, because we have to go and load all of this data.
[0:11] If that data request actually takes a long time, because we're getting a little bit and we're in a slow network, maybe, then that doesn't feel very snappy. We want this to feel a lot faster. We can optimize this because normally the user hovers over a link for even maybe 500 milliseconds before they actually click.
[0:33] Because Remix knows all of the CSS, the JavaScript, and the data that's needed by just looking at the URL, we can tell Remix to go ahead and start fetching all of that, as soon as the user shows some sort of indication that they want to go to that particular page. That's what we're going to do.
[0:52] We'll go to our list page for the posts. Where we're listing all these links to the post, this link that's coming from remix-run/react has a special prop on it called prefetch.
[1:05] Prefetch has a couple of options. None is the default behavior. Render is when we render, we want to prefetch everything. Intent means when the user seems to intend that they want to navigate to this page, go ahead and prefetch everything. That's what we're going to use.
[1:23] Right now, the heuristics of that are relatively simple. If the user hovers or focuses that link, then it will be prefetched. Eventually, Remix may be able to do a little bit more with where the mouse is heading and things like that.
[1:38] We'll say prefetch="intent". If we come over here, let's make sure that this reloads properly. We go to a slow 3G network connection. Watch what happens when I hover over one of these links. Looks like we already start fetching the JavaScript, as well as the data.
[1:55] When I actually click on it, it's an instant transition even though I am still on a slow network connection. Navigating to another one, you'll notice that we're not loading the JavaScript again because this is the same page. It's just different data and that's an interesting transition as well.
[2:11] To make this work, all we had to do was put a prefetch="intent" on our Link. Remix will automatically prefetch that page, as well as its data, JavaScript, and everything for us automatically.