缓存：“无存储”在 nextjs 13 中不起作用

Question

我在nextjs有一个服务器组件。我想在每次加载此页面时向API发送请求以获取数据。这就是为什么我申请{ cache: 'no-store' }fetch 和 set revalidate to 0，但它不起作用。第一次它向API请求，第二次和第三次......不发送请求。

我认为它从缓存中获取数据。

注意 我添加了import 'server-only'但不影响它。

import 'server-only';

async function getPosts() {
    const res = await fetch('http://localhost:4000/posts', { cache: 'no-store' })
    return res.json()
}

export const revalidate = 0;

export default async function ServerPage() {
    const posts = await getPosts()

    return (
        <div>
            <h2>Server Props...</h2>

            <ul>
                {posts && posts.map(({ id, title, body }) => {
                    return (
                        <li key={id.toString()}>
                            <strong>{title}-{id}</strong>
                            <p>{body}</p>
                        </li>
                    )
                })}
            </ul>
            
        </div>
    )
}

我该如何解决我的问题？

Answer 1

您可以尝试添加export const dynamic = 'force-dynamic'，这将解决问题（对我来说是这样，因为我没有使用 fetch 方法，而是使用 apollo 客户端），因为默认情况下所有页面都是静态的，尽管您应用的无缓存应该有效。

此外，您可能需要添加export const revalidate = 0, 以及在每个请求时获取它。