Let's talk about navigation. Now, of course, yes, we are navigating to different URLs from our search results. And that is to be expected, because these are links, and the browser is doing exactly what we want it to do. But there can be issues with that behavior. If you have a fast connection, then there's really nothing to worry about. But if you're out in the middle of nowhere with very poor service, it can take a while for pages to load. And while there's not a whole lot that we can do about it, Livewire 3 has a new feature called Navigate.

And while there's not a whole lot that we can do about it, Livewire 3 has a new feature called Navigate. And it will actually prefetch the content of the URL so that it will dynamically load it in the browser. And all we have to do is use wire:navigate. And that's it. It's very easy. So now in the browser, let's pull up our search results. Pay attention to the upper left-hand side of the screen, because whenever I click on any one of these links, we'll see that the content for that page is loaded, but the browser

Pay attention to the upper left-hand side of the screen, because whenever I click on any one of these links, we'll see that the content for that page is loaded, but the browser didn't actually navigate there. Livewire is fetching the content of that URL and loading it here in the page. So it behaves more like a single-page application. But let's open up the Network tab, and let's clear all of the results. And actually, let's pull up some search results and then clear the results. And I am going to press down on the mouse button. I have not let up yet, but notice that there is a request. It is prefetching the content of that URL so that whenever I release the mouse button,

I have not let up yet, but notice that there is a request. It is prefetching the content of that URL so that whenever I release the mouse button, like I just did, the content was already there. It just loaded it in. So we get a couple of benefits. First of all, we get the behavior of a single-page application. But more importantly, we get the benefit of prefetching the content of whatever URL we are going to visit. And not only that, but we also have the benefit of history. We can go back to the prior page, and in fact, the state that the page was in is loaded in.

And not only that, but we also have the benefit of history. We can go back to the prior page, and in fact, the state that the page was in is loaded in the browser. We can see that the search results were already loaded because that was the state of the page whenever we navigated to a different URL. Now there are a lot of features that come with Navigate, but we're just going to talk about a couple of more in this episode. So the default behavior is to prefetch a URL when the user mouse downs on a link. But we can actually start that prefetch when the user hovers the mouse over the link. And we just need to add the hover modifier.

But we can actually start that prefetch when the User hovers the mouse over the link. And we just need to add the hover modifier. So when we hover the mouse, I think for 60 milliseconds over a link, it's going to start the prefetch of that content. So now I'm just hovering over these links, and we can see that the content is being prefetched. Now that could get a little chatty. So I wouldn't use that all of the time, but there are some cases where that would be beneficial. But of course, that's up to you and your particular circumstances. Now there's one other thing that I want to look at. So let's go to our layout.

Now there's one other thing that I want to look at. So let's go to our layout. Now sometimes when we dynamically load content like this, we also want to include some JavaScript. So I'm going to clear out where we set up this event listener for search clear results. This is inside of the layout. And instead, I'm just going to write a message to the console that says page loaded. So every time a page is loaded in the browser, we should of course see that message. And whenever we navigate to another link, even though we are using Livewire's navigate, we still see this page loaded. And that makes sense, because Livewire is fetching the content of that URL, it's loading

we still see this page loaded. And that makes sense, because Livewire is fetching the content of that URL, it's loading it into the browser, and this JavaScript is part of that content. Now sometimes we want that behavior, but most of the time we don't. We want to load that JavaScript once, and then that's it. And Livewire has us covered. All we need to do is add the data-navigate-once attribute to whatever JavaScript that we want to load once, and that's it. So whenever we go back to the browser, of course, whenever we refresh, we will see the page loaded message.

So whenever we go back to the browser, of course, whenever we refresh, we will see the page loaded message. But if we navigate to some other page, we see page loaded is not written to the console. Therefore, that JavaScript was just executed once. Now of course, if we actually refresh the page, that's completely different because the browser is actually doing what it is supposed to do. It's retrieving content from the server and freshly loading it into the browser. But after that, the JavaScript will not execute as long as we navigate using a link that has the wire:navigate attribute. Navigate is a fantastic feature added with Livewire 3.

the wire:navigate attribute. Navigate is a fantastic feature added with Livewire 3. Not only does it give us the feel of a single page application, but it also prefetches content. All you have to do is use the wire:navigate attribute on your links, and you're good to go.