I always get cached responses in production

[daniellwdb]

Summary

I am building a website with Astro in which I created an API route. I always get a cached response from this route and I would like to have more control over this behaviour (this is only an issue in production, not when developing).

Example

https://daniell.dev/

Steps to Reproduce

From my endpoint, I am sending:

return new Response(
  JSON.stringify({
    currentlyPlaying:
      currentlyPlayingTrack && formatTrack(currentlyPlayingTrack),
    topTracks: userTop.items.map(formatTrack),
  } satisfies APIResponse),
  {
    headers: {
      "Cache-Control": "public, s-maxage=60, stale-while-revalidate=30",
    },
  },
);

I request this endpoint like:

import { nanoquery } from "@nanostores/query";

export const [createFetcherStore, createMutatorStore] = nanoquery({
  fetcher: (...keys: Array<string | number | true>) =>
    fetch(keys.join("")).then((r) => r.json()),
});

export const $spotifyData = createFetcherStore<APIResponse>(["/api/spotify"]);

I have also tried to add a vercel.json file containing:

{
  "headers": [
    {
      "source": "/api/spotify",
      "headers": [
        {
          "key": "Cache-Control",
          "value": "public, s-maxage=60, stale-while-revalidate=30"
        }
      ]
    }
  ]
}

[github-actions[bot]]

This discussion was automatically locked because the community moved to a new site. Please join us at vercel.community