我已将一个简单的网站升级到 Next.js 15.0.1,其中包含一些静态页面。但是,当在我的博客文章页面上工作时,它显示该路由是静态的,代码如下:
import SectionWrapper from "@/components/shared/section-wrapper";
export default async function BlogPage() {
const response = await fetch("https://dummyjson.com/posts").then((res) => res.json());
const posts = response.posts;
return (
<div className="grid grid-cols-1 gap-4 md:grid-cols-3">
{posts.map((post) => (
<div key={post.id} className="flex flex-col gap-3 rounded border bg-card p-4">
<div>
<h2 className="text-2xl font-semibold">{post.title}</h2>
<p className="text-sm text-muted-foreground">{post.body}</p>
</div>
</div>
))}
</div>
);
}
我认为在我的服务器组件中使用
await
时,缓存现在是可选的?我可以通过调用 await cookies();
来强制它是动态的,但这是旧方法,我不希望那样......我知道我可以使用 export const dynamic = ...
但重点是我认为 Next.js 15 不需要这是在我的组件中使用等待时的情况。
它在网页上显示为
Static route
,构建时也显示为静态
await
强制组件成为 React Server Component
(或者如果在非服务器组件上下文中使用,将导致 Error
)。但除此之外,我从未听说过await
对缓存有任何影响。也不知道为什么它应该 - Next.js 假设代码中 /posts
的每个请求都具有相同的结果,因为该请求中没有使用不同的参数,因此它下次依赖于缓存的结果。
您可以避免这种情况的另一件事是防止
fetch
缓存结果:
fetch("https://dummyjson.com/posts", {cache: 'no-store'})
(有关详细信息,请参阅此处。)