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!

Additional Resources

• CBWIRE Documentation
• CBWIRE on CFCasts
• CBWIRE Examples