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:36 and we'll see we get all of that data preloaded. So here's our data, our JavaScript files. And so by the time I actually click on this, it instantly transitions. This will be a little bit more interesting and exciting if we slow down to a throttled 3G network.

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:12 And we can add a prefetch intent on this one as well. I'm going to turn off slow 3G because it's too slow. It's annoying. And we'll come back here, clear this out, and then hover over this, and you'll see we are loading those JavaScript files and that data. So by the time we actually click, it's all ready to go.

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:09 for this particular route, for the note ID route. And then we have a module preload for the JavaScript for that route. And then another module preload for the shared chunk that this particular route also depends on.

02:26 So all of that is managed for us automatically by Remix, which is pretty stellar, I would say. So that is one of the cool things that we can do with JavaScript is we can actually prefetch based on the user's intent. Now, a common question that I get about this is, well, what about mobile?

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

03:54 to determine whether the user actually intends on clicking on something. And so that is one of the cool things that you do because we've got JavaScript on the page. We can make the experience really fast, even if the user has a really slow network connection. And a lot of this actually comes from the fact that Remix relies so heavily on the URL

04:13 and knows all of the data and the JavaScript and CSS and whatever other resources, it knows all of those things that are needed based on that URL. And that's what makes this so powerful.