Next.js 13 服务器组件不刷新数据

Question

我在 Next.js 13.4.6 中的服务器组件有问题

当我加载页面时，始终会显示第一次获取的旧数据。如果我刷新页面，则会加载新数据，但不会保存（如视频中所示）。下面我贴一下代码。这里可能出了什么问题？

展示视频

async function getData() {
    const res = await fetch(process.env.NEXT_PUBLIC_PRODUCTS_API_URL, { next: { cache: 'no-store' } })

    if (!res.ok) {
        throw new Error()
    }

    return res.json()
}

export default async function Offers() {
    let data;

    try {
        data = await getData()
    } catch (error) {
        return <span>{error.message}</span>
    }

    if (data.length === 0) return <span>No available offers</span>

    console.log(data.length)

    return <>
        <span className="text-zinc-500">Found {data.length} offers</span>
        <div><pre>{JSON.stringify(data, null, 2)}</pre></div>
    </>
}

我尝试在获取选项中使用无存储缓存选项（如您在代码中看到的），但它不起作用。

Answer 1

缓存选项不是 next 的子选项，它应该像下面这样引用。希望这能解决您的问题！ 🤞

const staticData = await fetch(`https://...`, { cache: 'no-store' })

参考：https://nextjs.org/docs/app/api-reference/functions/fetch