Foreground, setBackground, setStorable, setAbortable

There are some properties that you can set on a server-side action to influence how the framework manages the action while it’s in the queue waiting to be sent to the server.

Foreground and Background Actions

Foreground actions are the default. Multiple queued foreground actions are batched in a single request (XHR) to minimize network traffic. The batching of actions is also known as boxcar’ing, similar to a train that couples boxcars together. The server sends the XHR response to the client when all actions have been processed on the server. If a long-running action is in the boxcar, the XHR response is held until that long-running action completes. Marking an action as background results in that action being sent separately, which avoids it impacting the response time of the other actions.

To set an action as a background action, call the setBackground() method on the action object in JavaScript.

Storable Actions

Enhance your component’s performance by marking actions as storable to quickly show cached data from client-side storage without waiting for a server trip. If the cached data is stale, the framework retrieves the latest data from the server.

• A storable action might result in no call to the server. Never mark as storable an action that updates or deletes data.
• For storable actions in the cache, the framework returns the cached response immediately and also refreshes the data if it’s stale. Therefore, storable actions might have their callbacks invoked more than once: first with cached data, then with updated data from the server.

To mark a server-side action as storable, call setStorable() on the action in JavaScript code.

Abortable Actions

An abortable action in the queue is not sent to the server if the component that created the action is no longer valid, that is cmp.isValid() == false. A component is automatically destroyed and marked invalid by the framework when it is unrendered. Mark a server-side action as abortable by using the setAbortable() method on the Action object in JavaScript.

Mark a server-side action as abortable by using the setAbortable() method on the Action object in JavaScript.


Let's understand the scenarios using a sample application. Pressing the button under Foreground Action results in 1 batched action from 2 different actions (the 3rd entry), and is then sent to the server; while pressing the button under Background Action results in the action being sent separately (the 1st and 2nd entry) to the server.

Pressing the button under Storable Action for the first time results in one server trip (foreground action). Pressing the button again for couple of times doesn't result in any more server trips, displaying the same cached data from client-side storage as shown below.

Code for this application is provided below.