Как предотвратить кэширование ответов с помощью 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

Вам нужно будет увидеть, в каком месте длинной цепочки оно кэшируется. Но задумывались ли вы об упрощении этого, чтобы astro-компонент просто запрашивал серверную часть API Spotify и передал это компоненту реагирования в качестве опоры? Тогда вам не понадобится конечная точка astro API, не понадобится useStore и на один сетевой вызов от клиента меньше, а значит, будет намного меньше вещей для отладки.

mb21 07.07.2024 09:18

Я мог бы упростить это, но мне хотелось обновить/перерендерить, а также изменить песни (значение currentlyPlaying). Трудно определить, где он кешируется, поскольку локально все работает как положено, а мои возможности через Vercel ограничены.

Daniell 07.07.2024 19:32
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
2
62
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Другие вопросы по теме