Forum Discussion

isxtn's avatar
isxtn
Advisor
10 months ago

Does <@liaMarkupCache> cache the ajax calls in a component?

For example, if you're calling an endpoint and you want to cache the response (JSON) from that endpoint, will this cache it?

<@liaMarkupCache ttl="100000" variation="node" anonymousOnly="false" />

<@liaAddScript>
(function($) {
    $(document).ready(function() {
        $.get( "${my_endpoint_url}" ).done(function( data ) {
           let dt = new Date().toLocaleString()
           console.log(dt, data);

        }).fail(function() {
           console.log('fail');
        }) 
     });
})(LITHIUM.jQuery);
</@liaAddScript>
  • manasab's avatar
    manasab
    Ace
    9 months ago

    Hello isxtn ,

    Yes, this will cache the response from the endpoint. Please see the attached screenshot for your reference.

    If my response helped you, please give kudo and accept as solution. Thank you!

     

  • luk's avatar
    luk
    Boss
    9 months ago

    Not sure how the answer above (or rather the screenshot) showcases how anything is cached, but maybe I just don't get it.

    I didn't use liaMarkupCache very often, but from what I remember I would be inclined to say "No, it won't cache AJAX responses".

    Why? Especially if done like in the example above using @liaAddScript (which will inject javascript at the bottom of the page in a single script tag collecting all @liaAddScript calls from all components on the page) I can't see what kind of "markup" would be cached, because there simply is no direct markup output of that specific component, e.g. nothing to be cached here.

    As far as I understand liaMarkupCache is specifically designed to cache a component's output HTML (or whatever) markup, so it does not have to be re-rendered on every page visit and should therefore help with performance a bit for components that do not have highly dynamic content. But that would definitely not do anything with JavaScript triggered AJAX requests of which FreeMarker and thus liaMarkupCache would not even know... FreeMarker does not understand OR interpret JavaScript, e.g. how should it know what to cache?

    I'd love to be convinced otherwise though, so please, if someone can elaborate on a more concrete example/use case, always good to learn something new!


    More generally though I would advise to optimize and cache REST API responses via appcache/usercache long before even looking into caching HTML markup as API requests generally are the bottleneck with Khoros components and very rarely it is the actual rendering of the markup. Except of course you have very complex API data you render with multiple nested loops (looking at you #list) and create intermediate lists/objects (sequences or hashes) on the fly etc... Problem with that is, that such "complex" components usually are quite dynamic in their content, so caching the output markup is usually not an option, at least not in scenarios where I ran into performance issues from rendering stuff...

    That means in your case, I'd rather look into optimizing the endpoint that you are calling via JavaScript, so the content from that gets delivered as fast as possible. Then of course it is technically possible (via caching headers or other mechanisms set by the endpoint on the JSON response) to cache that response in the browser like any other cacheable resource.