Я пытаюсь получить данные на стороне клиента в 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.
Исправлено использованием maxage
вместо s-maxage
(Как устаревшая повторная проверка взаимодействует с s-maxage в заголовке Cache-Control?).