Netlify Function response caching

Support
1

I am making a request to a netlify function, which makes many requests to an API and then sends a combined response to the browser. The problem is I cannot cache the response on iOS browsers. PC/Android browsers do cache it. I’ve tried many headers including “force-cache” but nothing works on iOS. Why is this? I thought it’d cache a JSON response just fine. I can’t find much info when I Google it. I want to avoid the app making too many requests to the API as there’s request limits and there’s no need to get new data every time. Once a week would suffice. I could use localStorage but I’d rather use normal built in caching if possible.

Some other notes (skip this if you want):
On a related note, I’ve been messing with headers and there’s some inconsistency I don’t understand. I tried using an etag header along with a cache-control header of “public, max-age=0, must-revalidate”. On PC/Android, there’s caching going on but there’s no 304 response. I put a timestamp (date: new Date().toUTCString()) on the response json to properly check if caching is happening, and I can see that the timestamp is old, so there’s caching. What’s happening here? Why am I not getting a 304 response (I can see the request header if-none-match is being sent with the etag and the etag matches the response etag). It almost seems like it’s a cached response from a CDN, because it’s certainly not from the browser itself.

Also, if I generate a different etag on purpose every time, just to check if it properly doesn’t get a cached response, I see that for a few minutes it does get a cached response. Why? If the etag is different every time and I’m using “cache-control: public, max-age=0, must-revalidate”, I thought it would always get a new response. After a few minutes, the response does vary. But again, the cached response is from the server/CDN and not the browser.

2

Any information on this?

3

Relying on browser cache to persist data is not a good option in my personal opinion.

But in case of your actual problem, I’d suggest an entirely different approach than caching. I’d personally use an external database and fetch and store data into it the first time it’s requested. I’ll also save the timestamp of the request. For any subsequent requests, I’d query the database for the ready made response and check the timestamp. If it’s well within a week or so, I’d just pass the response from the database or if not, I’d query the API. This way, you don’t need to rely on browsers to persist the data, you can persist it yourself and have complete control over it.

About why iOS browsers don’t cache - I’m sorry that’s a question for the browsers. A server can send some response, but it’s up to the browsers how they handle it. I’m sorry I don’t have a better answer for that.

Function responses are not cached in the CDN, so the requests that you’re seeing are all uncached.

I have seen some weird caching behaviour on function responses by browsers in the past. I was testing with Netlify CLI and had setup a redirect in the function. I changed the code but was still being redirected to the previous destination. After spending a lot of time debugging why, I found it was merely a cache issue as the redirect worked fine in incognito.

1 Like