Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – Next.js 15 dynamic page is cached without using any caching

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

Tags:

2

Answers


  1. 0

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

    Login or Signup to reply.
  2. 0

    If you are not using any Dynamic APIs anywhere else in this route, it will be prerendered during next build to a static page. The data can then be updated using Incremental Static Regeneration.

    https://nextjs.org/docs/app/building-your-application/data-fetching/fetching#fetching-data-on-the-server-with-the-fetch-api

    Dynamic APIs:

    • cookies
    • headers
    • connection
    • draftMode
    • searchParam prop
    • unstable_noStore
    • unstable_after

    https://nextjs.org/docs/app/building-your-application/rendering/server-components#dynamic-apis

    So when you build this all posts from the https://dummyjson.com/posts endpoint will be prefetched and prerendered. This will be cached so rendering your component will be instantaneous thats why its static. After 60 seconds cache will be revalidated.

    Nextjs has an example here.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search