У меня сложилось впечатление, что SWR должен возвращать устаревшие данные при загрузке страницы, прежде чем обновлять представление новой информацией из API.
Я сделал базовое приложение Nextjs с простым тайм-аутом API, и он "загружается" - в течение 5-секундного тайм-аута, который я добавил в API - каждый раз. У меня сложилось впечатление, что он должен обслуживать ранее кэшированную версию перед обновлением после возврата вызова API?
URL-адрес Vercel – https://swr-test-mkhx72bz3-webknit.vercel.app/
репо - https://github.com/webknit/swr-тест
index.js
import useSWR from 'swr'
const fetcher = (...args) => fetch(...args).then(res => res.json())
export default function Home() {
const { data, error } = useSWR('/api/hello', fetcher)
if (error) return <div>failed to load</div>
if (!data) return <div>loading...</div>
return (
<div>{data.num}</div>
)
}
привет.js
export default function handler(req, res) {
setTimeout(() => {
res.status(200).json({ num: Math.floor(Math.random() * 5000) })
}, 5000)
}
Я не эксперт, но под «каждый раз» вы имеете в виду каждый раз, когда перезагружаете веб-страницу? SWR не будет кэшировать значение между обновлениями веб-страницы для вас.
Кэш в этом контексте означает, что два компонента, использующие один и тот же ключ swr ('/api/hello'), приведут к одному вызову API. Таким образом, какой бы компонент ни вызывал swr первым, он получит ответ API, а второй компонент получит такое же значение из кеша.
Но swr по-прежнему может вызывать API несколько раз позже, чтобы «повторно проверить» и отправить обновленный ответ обоим (или всем) компонентам, которые используют этот ключ.
@webknit В этом сценарии вы можете использовать поставщик постоянного кэша на основе localStorage
, см. swr.vercel.app/docs/advanced/….
Да, я имел в виду новый http-запрос. Я знал, что JS существует только в памяти, но я думал, что SWR как-то предлагает серебряную пулю для борьбы с этим. Я чувствовал, что описание SWR немного вводит в заблуждение (хотя я явно неправильно истолковал контекст кеша, как вы упомянули).... «SWR — это стратегия, которая сначала возвращает данные из кеша (устаревшие), а затем отправляет запрос на выборку (перепроверить) и, наконец, получить актуальные данные».