Prefetching
Prefetch component updates as the user mouses over HTML elements.
CBWIRE has a feature called prefetching which will prefetch the rendering of an action and store the HTML client-side without rendering the update to the DOM until the action is performed.
Consider the example below. Notice we have added a .prefetch modifier to our wire:click directive.
<button wire:click.prefetch="togglePreview">Show Preview</button>
<!--- ./wires/ShowImage.cfm --->
<cfoutput>
<div>
<button wire:click.prefetch="togglePreview">Show Preview</button>
<cfif showPreview>
<!--- Preview goes here --->
</cfif>
</div>
</cfoutput>
<cfscript>
data = {
"showPreview": false
};
function togglePreview(){
data.showPreview = true;
}
</cfscript>
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.
Last updated