Как предотвратить кэширование ответов с помощью Astro на Vercel?

Я пытаюсь получить данные на стороне клиента в Astro, но продолжаю получать кэшированный ответ.

Из моей конечной точки src/pages/api/spotify.ts я отправляю:

export const prerender = false;
...
export const GET: APIRoute = async () => {
  ...
  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",
      },
    },
  );
};

Затем в src/pages/index.astro я загружаю свой компонент React:

<SpotifyTrackList client:load />

Внутри SpotifyTrackList.tsx у меня:

export function SpotifyTrackList() {
  const { data } = useStore($spotifyData);

  return (
    <>
      {data?.currentlyPlaying && (

Где находится $spotifyData:

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"]);

Локально все работает нормально, и я подтвердил, что получаю последние данные, но на Vercel я продолжаю получать кэшированный ответ. Я также попробовал добавить файл vercel.json:

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

Наконец, мой astro.config.ts содержит:

output: "hybrid",
adapter: vercel({
  webAnalytics: {
    enabled: true,
  },
  imageService: true,
}),

Когда я проверяю ответы на свои маршруты, я продолжаю получать следующие заголовки (это было без моего файла vercel.json):

HTTP/2 304 
cache-control: public, max-age=0, must-revalidate
date: Fri, 05 Jul 2024 18:30:55 GMT
server: Vercel
x-vercel-cache: HIT
x-vercel-id: fra1::9k9pw-1720204255073-11f1e9dc8577
X-Firefox-Spdy: h2

🤔 А знаете ли вы, что...
JavaScript позволяет создавать собственные серверные приложения с использованием платформы Node.js.


62
1

Ответ:

Решено

Исправлено использованием maxage вместо s-maxage (Как устаревшая повторная проверка взаимодействует с s-maxage в заголовке Cache-Control?).