Is Caching DataTables AJAX Response a Good Practice for Static Data?

SoumyaAgarwal

Wanted a suggestion/clarity on a possible way to improve DataTables performance when working with large datasets that don’t update frequently (e.g., product catalogs, archived reports).

To reduce unnecessary API calls, will it be useful to cache the response in localStorage with an expiration time of 1 hour. The idea is to avoid re-fetching the same data on every page load while ensuring the cache refreshes periodically.

Here’s a small part of the approach:

const cacheKey = "tableData";
const cacheExpiry = 3600 * 1000; // 1 hour expiration

function fetchData(callback) {
    let cached = localStorage.getItem(cacheKey);
    let cachedTime = localStorage.getItem(cacheKey + "_time");

    if (cached && cachedTime && (Date.now() - cachedTime < cacheExpiry)) {
        callback(JSON.parse(cached)); // Use cached data
    } else {
        $.getJSON("your-api-endpoint", function(data) {
            localStorage.setItem(cacheKey, JSON.stringify(data));
            localStorage.setItem(cacheKey + "_time", Date.now());
            callback(data);
        });
    }
}

Not sure if this is the best approach, especially when handling data that occasionally updates. I was trying to consolidate some good practices on how to use Datatables with jQuery, Laravel, and Angular. Would appreciate any insights!

allan

You shouldn't need to use localStorage for this. Simply set the appropriate expire headers on the HTTP response from the server and the browser will cache it for you. The GET request default of DataTables helps with that.

It is also possible, using this method, for the server to invalidate the cache when the HEAD request is made via an Etags update (although that is perhaps a lot more involved as you'd ideally have a static file that the server can check, rather than needing to query the db).

Allan

SoumyaAgarwal

Thanks, Allan! That makes sense. Setting Cache-Control headers is indeed a much cleaner and more manageable approach compared to handling caching in localStorage. It reduces manual code complexity and leverages built-in browser capabilities. I’ll now incorporate this as a more efficient way to optimize performance.

Loren Maxwell

@SoumyaAgarwal -- I was looking at the page you linked to (great one, BTW) and it mentions "Use deferRender: true to Speed Up Large Tables".

While this is indeed great advice, it might be worth mentioning deferRender defaults to true starting with DataTables 2.0.

SoumyaAgarwal

Thanks for pointing that out, Loren! It’s definitely useful to highlight the default behaviour of deferRender in DataTables 2.0. I'll amend accordingly. This will make optimizing large tables even easier without extra configuration. Appreciate the insight!

Regards.