Sign up to access "Livewire Performance" right now.

We'll take a look at this anyway because I think it's really important, and it can just, like I said, provide a kind of perceived improvement in speed. So let's just start with creating our component. So let's go ahead and say Make or LiveWire Make,

and let's just call this Prefetch. I don't really think it's a good example. So we're going to go ahead and add this Prefetch component to our dashboard, and we're going to go ahead and display some employee details here.

We won't pass any props through because we already know how to do that, but if we come over to the Prefetch LiveWire component, let's just say that when we click on a button within this component, we want to load an employee.

So we'll create out an Employee property, and we'll create out a method which we can call when a button is pressed to load an employee. This could be more employee information or anything really. It doesn't really matter.

And let's go ahead and set this employee to Employee Find and 1. And like I said, that could be loading in anything, additional data, making an API request. It doesn't really matter what this actually is, but it's a bit convenient that we have employees already available.

So inside of the Prefetch template then, we want a button in here to, when we click on it, load that employee. And let's just write Load Employee in there. And let's just dump the employee information out inside of here so we've got something to see.

Okay, let's go over and try this out. So when I click on this, that loads the employee. Now it's very, very quick because we're making a request to our own database, but if this was slightly slower, e.g. we added, again, we're going to bring back that sleep in there,

a one-second sleep, then you're going to have a very slight delay, well, a one-second delay after you've clicked this button. So I've already pressed that. We've got one second to wait, and then the data rolls in.

Now the way prefetching works is we apply this to the button itself. So when we hover over the button, in the background, Livewire is already loading that data for you before the user presses the button.

So we hover over Load Employee. Livewire will start to make the request that we want, e.g. calling that LoadEmployee method. It will store it, cache it, and then when we press the button, it will give you that information. So let's see how this works in the prefetch template.

So all we want to do here is go ahead and use the prefetch modifier. That's pretty much it. Let's go over, give this a refresh. Now I'm going to go ahead and not click on the button, but I'm going to hover over that button.

So I've hovered over it, and you just saw at the bottom of the screen where we've got DebugBar open that a second request has been made. Now when I click on it, we instantly get that data back. So this can provide, like I said at the start, a perceived speed improvement in your UI.

So a user will probably just start to hover over the button, and when we click on that, which I've just done, you can see it almost looks like that data has come in instantly, even though we have that one second sleep,

because in the background, LiveWire is preloading all of that information. Now of course, if a user were to quickly click on the button, you're still going to get that slight delay, like we've just seen here. I clicked on that about a second ago.

But most of the time, you'll find that in LiveWire or in any app, a user's kind of hovering over before they click, and then when they do click, they're going to see that data come back instantly. And it's highly unlikely that you're going to have a second delay in the kind of data that you're getting back.

It'd be more appropriate to use a function like useSleep to test this out, which is in microseconds. Let's say that we had 200,000. That's a more realistic value. So when I hover over this and click on it, you can see that you get a very slight delay,

almost like a standard database delay for a large amount of data that you're trying to get back. And then again, as soon as we click on it, it almost looks like that data is instantly loaded. So there we go. Prefetching is not an actual speed improvement, but it's more a speed perception from your user's point of view.