SWR 不提供陈旧数据？

Question

我的印象是 SWR 应该 return 在使用来自 API 的新信息更新视图之前加载页面上的陈旧数据。

我制作了一个具有简单 API 超时的基本 Nextjs 应用程序，它正在“加载”- 我添加到 API 的 5 秒超时 - 每次。我的印象是它应该在 API 调用 returns?

更新之前提供以前缓存的版本

维塞尔 URL - https://swr-test-mkhx72bz3-webknit.vercel.app/

回购 - https://github.com/webknit/swr-test

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>
  )
}

hello.js

export default function handler(req, res) {

    setTimeout(() => {
        res.status(200).json({ num: Math.floor(Math.random() * 5000) })
    }, 5000)
  
}

Answer 1

我不是专家，但是“每次”是指每次重新加载网页时吗？ SWR 不会为您缓存网页刷新之间的值。

此上下文中的缓存意味着使用相同 swr 密钥（“/api/hello”）的两个组件只会导致对 api 的一次调用。因此，哪个组件首先调用 swr 将获得 api 响应，第二个组件将从缓存中获得相同的值。

但是 swr 之后仍然可以多次调用 api 以“重新验证”并将更新后的响应发送到使用该密钥的两个（或所有）组件。

SWR 不提供陈旧数据？

SWR not serving stale data?

javascript

reactjs

next.js

swr