Does use cache directive intentionally not deduplicate?

[ellemedit]

Summary

import { NextResponse } from "next/server";

export async function GET() {
  const result = [];
  for (let i = 0; i < 30; i++) {
    result.push(await getTest());
  }
  return NextResponse.json(result);
}

async function getTest() {
  "use cache";
  return Math.random();
}

This route handler response with same cached result as getTest() cached.

import { NextResponse } from "next/server";

export async function GET() {
  const result = await Promise.all(
    Array(30)
      .fill(null)
      .map(() => getTest())
  );
  return NextResponse.json(result);
}

async function getTest() {
  "use cache";
  return Math.random();
}

But this doesn't. It returns all different number by getTest for first time. After caching, it returns same number.

I think it's hard to deduplicate on multi-instance as state sharing is a difficult problem. But even same process or request, it doesn't deduplicate. Or this is unexpected pattern?

Additional information

No response

Example

No response

[aniruddhaadak80]

Hi @ellemedit ,

The behavior you're observing with the "use cache" directive not deduplicating results in the second example is intentional. When you call getTest() multiple times in a loop (as in your first example), the cache recognizes the repeated calls and returns the cached result.

In the second example, when you use Promise.all() with Array(30).fill(null).map(() => getTest()), it creates multiple independent promises that run concurrently. Each promise is treated as a separate invocation, leading to different results being returned initially. After the results are cached, subsequent calls will return the same value due to the cache.

This behavior highlights the complexity of deduplication in concurrent scenarios, and while it may seem inconsistent, it's a known aspect of how caching operates in Next.js.

Thanks!

[kachkaev]

@aniruddhaadak80 do you know if it is possible to deduplicate concurrent calls? If getTest() has "use cache" and no arguments, I would expect it to be called only once, as flagged by @ellemedit. Seeing multiple concurrent invocations is odd. When the first call is made, the status of a cache key should become pending and all other function calls should wait for the first and only promise to resolve. Seems like a standard expectation here, I’m a bit surprised to see multiple calls to getTest().

What happens in practice, is that I call await fetchStuff() from multiple parts of a page and see multiple concurrent calls to an external API route. Such calls can be quite expensive. I guess it should be possible to add const stuffPromise = fetchStuff() at the top of a page and then pass the promise down but that'd be prop drilling. Besides, it won't be possible to deduplicate calls between layout.tsx and page.tsx.

Similar discussion: #77391