I have upgraded a simple website to Next.js 15.0.1 with some static pages. But when working on my blog post page it shows that the route is static with the following code:
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>
);
}
I thought caching is now something opt-in when using an await
in my server component? I can force it to be dynamic by calling await cookies();
but that's the old way, I don't want that... I know I can use export const dynamic = ...
but the point is that I thought Next.js 15 doesn't need this when using an await in my component.
It shows as Static route
on the webpage and when building it also says static
await
enforces the component to be a React Server Component
(or will lead to an Error
if used in a non-server-component context). But apart from that, I never heard that await
has any effect on caching. Wouldn't know why it should, either - Next.js assumes that every request against the /posts
endpoint bears the same result since no varying parameters are used in that request, and therefore it relies on the cached result the next time.
Another way to prevent fetch
from caching the result:
fetch("https://dummyjson.com/posts", {cache: 'no-store'})
(See here for details on that.)
Edit to address some confusion:
In Next.js 15, fetch
calls in GET
route handlers default to {cache: 'no-store'}
(src). But this is not the case for a React Server Component, where you still have to set that on your own.