In this episode, we dive into prefetching and how it can make your app feel way faster to users—even though it doesn’t actually speed up your backend! It’s all about giving the illusion of speed by preloading data before the user actually triggers an action.
We start by building a simple Livewire component called Prefetch
, which sits on our dashboard and displays employee details. We add a button that loads employee data when clicked—simple enough, but it gets more interesting. To demonstrate the point, we deliberately add a delay (using sleep
) so you can see what happens when the app isn’t lightning fast by default.
Then, we bring in the magic: Livewire’s prefetch
modifier. With this on the button, the moment a user hovers over it, Livewire starts loading the data in the background. So by the time the user actually clicks, the data is ready and appears instantly—goodbye loading spinners!
We watch how this works through Livewire’s debug bar, noting how hovering triggers the background request. We also talk through the real-world impact: most users naturally hover before clicking, so prefetching makes the interface feel way faster, even if there’s still a short delay on the backend. The episode wraps up with tips on simulating more realistic network delays and emphasizing that while prefetching doesn’t improve raw speed, it’s a super handy trick to create a smoother, snappier user experience.