Question 418329 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Next.js 15: fetch request is still cached by default

According to the Next.js blog and documentation fetch requests are no longer cached by default since Next.js 15:

https://nextjs.org/blog/next-15

https://nextjs.org/docs/app/api-reference/functions/fetch#optionscache

However, if I send the same request twice in a component, the second request is still cached.

To reproduce it I created a new Next.js app using npx create-next-app@latest (installs Next.js 15.0.4).

Then in src/app/page.tsx I added following function:

const getData = async () => {
  const before = Date.now();
  await fetch('https://www.somedomain.com');
  const after = Date.now();

  return after - before;
};

and calling this in the Home component:

export default async function Home() {
  const diff1 = await getData();
  const diff2 = await getData();

  return (
    <>
      <p>Fetch1 took {diff1}ms</p>
      <p>Fetch2 took {diff2}ms</p>
    </>
  );
}

This results in following output:

Fetch1 took 132ms
Fetch2 took 2ms

I expected Next.js 15 to not cache the second request.

It is mentioned here that ‘no-store’ is the default.

But even if I add { cache: 'no-store' } explicitly, the request will be cached:

await fetch('https://www.somedomain.com', { cache: 'no-store' });

Am I missing something?

Tags:

2

Answers


  1. 0

    Your way of checking whether this request was cached or not seems inappropriate. Caching happens at multiple levels. Please study the entire flow of how the internet works. There is caching at Browser level, then at Internet Provider level, and so on… Moreover, connection is still open to your server.

    Try this

    export default async function Home() {
  const diff1 = await getData();
  await new Promise(res => setTimeout(res, 500));
  const diff2 = await getData();

  return (
    <>
      <p>Fetch1 took {diff1}ms</p>
      <p>Fetch2 took {diff2}ms</p>
    </>
  );
}
    Login or Signup to reply.
  2. 0

    The fetch options are for Data Caching, not for Memoization. React keep the result of the fetch call during rendering. Since you’re using it in a Page, the result is preserved throughout the rendering. Essentially, it seems that the lack of Data Caching is being blocked by the Memoization mechanism in this situation
    I suggest you also read this article
    Request Memoization

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

Back To Top
Search