Cache api call in NextJS middleware

Support Edge Functions
, ,
1

Hi!

With the new cache features I was looking into caching api calls made from my NextJS middleware. This process is as follows: Middleware runs > queries my internal NextJS api route (src/pages/api/my-route) > api route queries my WP backend > WP returns data.

Since middleware runs as an edge function, I should be able to cache this, or am I wrong?

I’ve added a basic cache header to my fetch call in the middleware which looks as follows:

const response = await fetch(
            `my-internal-api-route`,
            {
                headers: {
                    'cache-control': 'public, s-maxage=3600',
                },
            }
        )

But this didn’t seem to cache it, since when looking at the edge function logs the api call keeps firing. I also tried adding the cache header to the actual api route, but I’m getting the same results.

What am I missing?

2

The EF will indeed be invoked. They have their own caching: Optional configuration for edge functions | Netlify Docs.

You might have to use native Netlify Edge Functions instead of middleware.

However, why not just use ISR here?