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>

In the example here, the togglePreview action will be prefetched and invoked when the user mouses over the button. The results of the fetch are not displayed until the user clicks the 'Show Preview' button.

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.