Enhancing User Experience with Prefetching
00:00 All right, let's get this going. So I'm going to hard reload. We're going to clear this out, and I'm going to go to our username route. And in here, that's this link right here we want to prefetch when the user intends on clicking on it. So we'll say prefetch intent.
00:17 And with that, now when the user hovers over it, or they mouse down on it, or whatever, they give us some sort of intent that they want to click on it, then we should get the preloading of all of the resources necessary for that page. So I'm going to hard reload again. We'll clear this out, and then I hover over it,
00:54 So now I hover over this, and it takes a second for these things to actually download. And then I click, and it instantly transitions. Whereas if we're on a slow 3G network and we hadn't done that, it would take a little bit of time. So with that, now let's go ahead and go to our notes route.
01:31 You'll see that we have the prefetch cache is where that data came from. So it's all working as a prefetch cache. That's exactly what this is for. Now what's interesting is how this is implemented. So if I click on this, then you'll see we have our anchor tag, and I hover over and it just adds some link tags.
01:50 So if we say, let's see, right here, it's kind of hard to observe. Here we go, right there. There. So we've got a prefetch that is a fetch, and this is the URL that will be fetched that is responsible for the loader data
02:43 Like mobile doesn't have this idea of focusing. And yes, that is true. However, to compensate for clicking and dragging and tap and move your finger, the browsers will typically have a 300 millisecond delay
03:01 before they actually register a tap as a click. And so even with that, you actually get some time. Now, some browsers are a little different and you can actually disable that behavior. But yeah, for the browser to be able to distinguish
03:17 between a double tap or a drag or just a single tap, there is going to be some sort of delay. And so with the prefetch intent, you actually will kind of get a little bit ahead of that, even in mobile. But also one of the reasons why it's called intent
03:34 rather than like on hover, you also get on focus, you'll get the same behavior as well. You'll notice here, we've got that right there. So on focus, you also get this. The reason that it's called intent instead of one of those events is because in the future, it's possible that Remix will add a little bit more intelligence