When I want to increase the perceived speed of my CBWIRE apps, one tool I reach for is prefetching. Prefetching is a built-in feature of Livewire JS that allows you to invoke an Action's results on mouseOver using the .prefetch modifier.
<button wire:click.prefetch="generatePDF">Generate PDF</button>
In the example above, I'm telling CBWIRE to invoke the generatePDF action on my component when a user clicks on the button OR if the user mouses over the button. I want it to prefetch the result.
<button wire:click.prefetch="generatePDF">Generate PDF</button>
<cfif args.pdfReadyForDownload>
<button>Download PDF</button>
</cfif>
Here's my Component where the Action is invoked.
component extends="cbwire.models.Component"{
property name="pdfService" inject="PDFService@myapp";
data = {
"pdfReadyForDownload": false
};
function generatePDF(){
pdfService.generate();
data.pdfReadyForDownload = true;
}
}
function generatePDF(){
pdfService.generate();
data.pdfReadyForDownload = true;
}
Prefetching will only occur one per mouseOver. Prefetching works well for actions that do not perform any side effects, such as mutating session data or writing to a database. If the action you are "pre-fetching" does have side effects, you may encounter unpredictable results.
I've added an example of prefetching to our ever-growing CBWIRE Examples app. Enjoy!
Add Your Comment