Aurelia Caching

Best Practices
1

Hello,

Basically my question is simple, the answer might not be. What’s the best way to implement caching in an overall application using aurelia?

Because my solution is having a few caching issues. At the moment we do not use any system to maintain cache. We just add a timestamp on the fetch requests to force a new request everytime which is not by far a good solution.

I took a look at that https://aurelia.io/docs/api/fetch-client/interface/RequestInit/property/cache/ and I realized that there is a property in header to be used in the fetch clients for caching, but the properties itself does not say much. For some we may infer what they mean, like no-cache… But for the others I’m not sure. Also which would be the best approach to use one or other? Maybe have some kind of state or something across the application, or this cache configurations are enough and do the job very well?

2 Likes
2

The cache property you mentioned is not unique to Aurelia, it’s just the standard fetch configuration. You can read more about it here https://developer.mozilla.org/en-US/docs/Web/API/Request/cache

From your description, you want to burst the cache every time. So simply do:

fetch("some.json", {cache: "no-store"})
  .then(function(response) { /* consume the response */ });

which means in your fetch client:

http.fetch("some.json", {cache: "no-store"})
  .then(function(response) { /* consume the response */ });
1 Like
3

Thanks for the link.

I don’t want to burst cache everytime, I’m just currently doing it because the browser caching is not good enough and sometimes we had outdated content. I’m looking for a good approach to have caching and avoid this kind of problems. So I guess aurelia fetch uses the default value on caching for every fetch if nothing is directly choosen?

I want to avoid requests as maximum as possible, but at the same time have the correct data.

1 Like
4

What you can do is to check for timestamp of last update from server, and send cache bursting accordingly. So you just need to implement that sort of thing for your web api server.

1 Like
5

It’s probably not your browser, it’s the backend didn’t set proper HTTP headers (Cache-Control, Last-Modified, ETag, …).

1 Like
6

I think that’s correct, but in IE :see_no_evil: I’m having problems

Basically if all my requests do not work like that:

return this.http.fetch(this.aureliaConfiguration.get("api.workflowEndpoint") + "/endpoint?_t=" + new Date().getTime() I will have problems in IE

I tried to remove the getTime() and added the no-cache to the request and still did not work.