Livewire Click.prefetch: Make External Data Load "Instantly"

now I want to show you a thing called pre-fetch to get the data earlier than someone clicked the button but as soon as they hover on the button let's create a component to get the Bitcoin price and show it on the screen so for example PHP art doesn't make Livewire bitcoin price and an unreliable project this is a default larval project in welcome blade instead of all of that we will do add Live Wire bitcoin price like this right inside of that bitcoin price resources use Livewire bitcoin price let's have a button button show price wire click get price for example right and then we'll have price as variable price price dollar price then in the component itself we don't need the mount method by default but we need the price so public price and then we also need a method for getting the price public function get price and for example price equals one two three four five for an example and of course it should be this price right and of course we need to enable Live Wire Styles and Live Wire scripts in the welcome blade actually let's return all the other template it's just in the head section we will have Live Wire styles and the body will have the component so at Live Wire I've pasted here and then also we need to have Live Wire Scripts like this let's try it out here's our page I've zoomed it in and when we click show price the price appears for now from local now let's get it remote from actual bitcoin price and let's prefetch that before the button is clicked so I've changed the hard-coded price to actual HTTP get from my notes and we're using public coin desk API here and let's see how it works actually refresh the page show price and it takes a while to appear like half a second or something like that what if we can do that instantly let's do in the blade in the Bitcoin price blade wire click Dot prefetch look what happens now we refresh the page as soon as we hover on the button the API call has been made and now the result is instant let's take a look at the development console in the browser in the network tab we refresh the page and look what happens when I hover over show price I didn't click that yet but the Bitcoin price call has been made already again when I click that the price has been already set and it is just shown so if you have some external API requests and you want it to get started sooner than the actual click has been made it will make a user experience better and they will be under impression that the data comes instantly

Channel: Laravel Daily

Views: 6,600

Keywords:

Id: 1vnvLMkc7AM

Length: 2min 54sec (174 seconds)

Published: Fri Mar 24 2023