Cannot get Netlify api endpoint caching to work as expected

Support
,
1

Website team name: iamsterdam
Website URL: www.iamsterdam.com

The website is built using NextJS. I’m using a nextJS api endpoint that reachable at “/api/breadcrumbs?slug=pageslug” to asynchronously fetch the breadcumb CMS items for the current page (by slug). This hardly ever changes, so it seems logical to implement some server side caching for this endpoint by following the Netlify documentation about caching.

However, even though when the endpoint does include the right headers (if I’m understanding the documentation correctly), it still seems to run alle the code in my api handler all the time. I’ve confirmed this by adding logging right before the point the request to my CMS is actually being done. It comes by almost (not always it seems…) every time I visit the same page (so with the same slug).

My response headers are:

Age: 40
Cache-Control: public,max-age=604800
Cdn-Cache-Control: public, max-age=604800
Cf-Cache-Status: DYNAMIC
Cf-Ray: 81fb5517cbe00e33-AMS
Content-Encoding: br
Content-Type: application/json; charset=utf-8
Date: Thu, 02 Nov 2023 09:25:49 GMT
Etag: W/"3xpw3uuuj63m-df"
Nel: {"success_fraction":0,"report_to":"cf-nel","max_age":604800}
Netlify-Vary: query=locale|slug
Server: cloudflare
Strict-Transport-Security: max-age=15552000
Vary: Accept-Encoding
X-Middleware-Next: 1
X-Nf-Render-Mode: ssr
X-Nf-Request-Id: 01HE7NMTQKCXXQY0MQB3KYV3FG

I actually also add the header Netlify-Cdn-Cache-Control: public, max-age=604800 to the response headers, but as described in the docs, this is stripped before actually sending the response to the browser.

I can imagine that it has to becached on the different CDN’s so there could be some duplicate requests at first, but the number of requests to the CMS does not seem to decrease over time.

The page I’m checking is: Tickets | I amsterdam. If you inspect the network you should see an XHR request to https://www.iamsterdam.com/api/breadcrumbs/nl?slug=/tickets

Why is the caching not working?

2

If all you need to do is cache, why not use ISR without the revalidate timing? That would cache the data till the next deploy.

3

Thanks for your reply.

Unfortunately in this case that is not possible because of missing features in Netlify. I already have a ticket about that on the forums and on github.

This also regards nextjs API endpoints and it’s not always possible or desired to just rewrite the API call and use SSR/SSG/ISR instead. It’s not really a solution to the question I had: why is the caching as described in the Netlify documentation not working as expected (or am I missing something)?

6

I have asked the devs to check if everything is working as expected, as the configuration appears correct to me.

1 Like
7

Hi @floris10hove,

Based on our discussion with the devs, this is happening due to different CDN nodes handling your request. The devs were able to consistently connect to a single node and that worked as expected (that is, the Lambda was not invoked). However, in a real-world situation, consecutive requests might or might not be handled by the same node, thus you cannot use this way to 100% ensure that functions won’t be invoked every time.

8

Hi,

Thanks for you response and taking your time for discussing this with the devs. I had hoped the caching was a bit more reliable and persistent between user visits, but after some more testing I do see that I get a cached response back some of the time.

Thanks for you help.