Tag Archives: caching server data

New Way to Cache in Lightning Components

One of the best ways to gain performance in your Lightning pages is through caching. I have spoken and written about how one Lightning best practice is to use Storable Actions. File_Server_Cache_BlueThis means data served up from your server side actions is cacheable and after they are accessed the first time, they are super fast to render a second or third time. This is still a best practice, but what I wanted to make you aware of was that there is a new and even easier way to get the best of caching.

And, the best part is that you can get the benefits of caching using this technique for both your Aura components and any new Lightning web components you might create.

Prior to the Winter 19 release, if you wanted to cache data you had to call setStorable() for every action that called your apex method, such as in this example:

​var action = component.get('c.getRacesDB');
​action.setStorable();
​action.setCallback(this, function(response) {
​            // Code here to handle the response
​}
​$A.enqueueAction(action);

In the code above, I am making a call to an apex method named getRacesDB, and this will return to me a list of race data. To make that data cacheable, I only have to add the line of code that marks the action as setStorable. Even though this is only a single line of code, if I had multiple places that needed to call the getRacesDB method (which is very likely in a large and complex application), the setStorable line of code would have to be repeated.

With Winter 19 and the API version of 44.0 or greater, you can simply annotate your @AuraEnabled apex method with the cacheable=true attribute. You no longer need to use setStorable. For example, if I wanted to make getRacesDB method cacheable, I would just add the cacheable=true attribute and the data it returns will be cacheable for any actin that calls it.

public with sharing class ListRacesController {

    @AuraEnabled(cacheable=true)
    public static PageResult getRacesDB(Decimal pageSize, Decimal pageNumber) {
        // Code to return the list of races goes here

Just make sure to remember to use API version 44.0 and above when using this new attribute.

Lightning Best Practice: Storable Actions

File_Server_Cache_Blue

Storable Actions are a GREAT way to enhance the performance of your Lightning components and implementing them is incredibly easy, but there is one big gotcha to seeing them work with a stand-alone Lightning Application.

Even though storable actions are automatically configured in Lightning Experience and Salesforce1, any Stand-alone Lightning apps that are used to host your components will NOT use caching by default.

For these apps to use storable actions, you must do these two things:

1.) Add a new component which you can name whatever you want, but I named mine AppTemplateComponent and have it use the following code:

AppTemplateMarkup

2.) You then need to add the following attribute to the aura:application tag of your Lightning Standalone app:

template="c:AppTemplateComponent"

Once you do this, you should be able to see the caching working for any component used in that app that calls the following line of code:

action.setStorable();

Isn’t that amazing?

Just one line of code is all you need to add to start taking advantage of caching in your server-side actions. The impact on performance can be amazing and perhaps the best place to see is when it comes to rendering a list of data (especially if that data is non-mutable and therefore will not be updated).

This best practice really is a no brainer that everyone building Lightning Components should consider using.

If you found this article useful, you might want to checkout my latest course on Pluralsight titled, Lightning Component Development Best Practices, where I talk about storable actions and a lot more.