[Next.js 16] use cache works locally but not on Vercel Production for dynamic route

[YoonDongGeun]

Summary

Environment

• Next.js: 16.1.1
• React: 19.2.3
• Deployment: Vercel (production)

Issue

The "use cache" directive works correctly when building and running locally, but when deployed on Vercel it always invokes the function instead of returning cached values, even when called with the same parameters.

what i wanna do

I want to make the page stream using PPR, and I want to stream it immediately using a cached component.
For example, when a request comes in for /articles/3, I want to have the component for article #3 cached in advance and send it to the client right away.

However, when I deploy to Vercel, it doesn’t work and the API keeps being called repeatedly.
On the other hand, in the local environment, component caching works as expected.

Local Production Build Result

Code where use "use cache"

// app/category/[category]/[subCategory]/page.tsx
import { cacheLife, cacheTag } from "next/cache";
import { HydrationBoundary, QueryClient, dehydrate } from "@tanstack/react-query";

// Page
export default async function Page({ params }: PageProps) {
  return (
    <Suspense>
      {params.then(({ subCategory }) => (
        <CachedComponent encodedSubCategory={subCategory} />
      ))}
    </Suspense>
  );
}

// Cached Component
const CachedComponent = async ({ encodedSubCategory }: { encodedSubCategory: string }) => {
  "use cache";
  cacheLife("max");
  const [subCategory, dehydratedState] = await getCachedPageData(encodedSubCategory);
  
  return (
    <HydrationBoundary state={dehydratedState}>
      <ArticleListContainer category={subCategory} />
    </HydrationBoundary>
  );
};

// Cached Data
const getCachedPageData = async (encodedSubCategory: string) => {
  "use cache";
  const subCategory = decodeURIComponent(encodedSubCategory);

  cacheLife("max");
  cacheTag(`category-${subCategory}-page`); // tag: ["category-Javascript-page"]
  const dehydratedState = await prefetchCategoryArticles(subCategory, 0, 12);
  
  return [subCategory, dehydratedState] as const;
};



// <-- Don't need to Read-->
const prefetchCategoryArticles = async (
  subCategory: string,
  cursor: number,
  limit: number
) => {
  "use cache";
  cacheLife("max");
  
  const queryClient = new QueryClient();
  await queryClient.prefetchInfiniteQuery({
    queryKey: ["articles", "category", subCategory, limit.toString()],
    queryFn: async ({ pageParam }) => {
      // Fetch from backend API
      const { data } = await getArticleByCategory(subCategory, pageParam, limit);
      return data;
    },
    initialPageParam: cursor,
  });
  
  return dehydrate(queryClient); // maybe serializable
};

Expected Behavior

When accessing the same category multiple times (e.g., /category/Frontend/React or /category/Frontend/Angular), the cached function should return the cached dehydratedState instead of being re-invoked.

Actual Behavior

Local Production Build (pnpm build && pnpm start)

• ✅ Cache works as expected
• ✅ Backend API is called only once
• ✅ Subsequent requests return cached values
• ✅ No re-invoking of prefetchCategoryArticles
• cache found on run time (local production)

• real code where "use cache"

Vercel Production Deployment

• ❌ Cache is completely ignored
• ❌ Backend API is called every time even for the same category
• ❌ prefetchCategoryArticles is invoked on every request
• ❌ Logs show function execution every time
• always do "Function Invocation"

First Render (on vercel production)	After First Render (on vercel production)

What I've Confirmed

• ✅ Other "use cache" works well on Local Production and Vercel Producton except when using dynamic routings (/articles/[articleId], /category/[category]/[subCategory])
• ✅ Separated cache functions to accept only serializable parameters (strings, numbers)
• ✅ Confirmed cacheComponents: true in next.config.ts
• ✅ Confirmed it works locally with production build
• ❌ Still NOT working on Vercel

Questions

• What is incorrect in my code? I want to cache components(or function) for rendering on dynamic routes.

Additional information

No response

Example

No response

[YoonDongGeun]

I initially tried to cache the component using Vercel’s use cache directive, but it did not work as expected.
I then attempted to cache the function result instead, but that also failed. While it works correctly in a local build, it does not work on the Vercel server.

As a result, I ended up using unstable_cache as a workaround.
For now, I’ve updated the code to use unstable_cache as a temporary solution, and it works properly in Vercel Production.

• Before

    // when call data.
    const [subCategory, dehydratedState] = await getCachedPageData(encodedSubCategory);

• After

  const [subCategory, dehydratedState] = await unstable_cache(
    (encodedSubCategory: string) => getCachedPageData(encodedSubCategory),
    [encodedSubCategory],
    {
      tags: [`category-${decodeURIComponent(encodedSubCategory)}-page`],
      revalidate: 604800,
    })(encodedSubCategory);

However, I want to cache either the component or the function result for dynamic routes. Could you please help me?

[pouriya73]

@YoonDongGeun
You cannot truly fix this right now. This is a known limitation / bug in Next.js 16 on Vercel production where use cache does not work reliably with dynamic routes.
It works locally because local Node has a stable process and memory. Vercel production does not.
So the only correct move today is to work around it, not to fight it.

The correct workaround (production-safe) :

import { unstable_cache } from "next/cache";

export const getCategoryData = unstable_cache(
  async (subCategory: string, cursor: number, limit: number) => {
    return await fetchCategoryFromBackend(subCategory, cursor, limit);
  },
  (subCategory, cursor, limit) => [
    `category:${subCategory}`,
    `cursor:${cursor}`,
    `limit:${limit}`,
  ],
  {
    revalidate: 60 * 60 * 24 * 7, // 7 days
    tags: (subCategory) => [`category-${subCategory}`],
  }
);

Then in your page:

const data = await getCategoryData(subCategory, cursor, limit);

[YoonDongGeun]

Thanks, that explanation helps a lot.
Given the current state of Next.js 16 on Vercel, it looks like this is something we can’t really fix properly right now.

I’ll just go with unstable_cache for the time being and use it as a workaround until things are more stable.
Not great, but seems like the only realistic option in production for now.

Thanks for pointing me in the right direction.!! :)

[pouriya73]

Yes @YoonDongGeun , you’re absolutely right.
The current state of Next.js, due to its instability and the issues it has faced over the past few months, makes it a reasonable choice to be cautious about. It will likely be fixed in the near future, but older stable versions still carry more credibility and reliability at the moment.

[pouriya73]

@YoonDongGeun Or

Use fetch with next cache options :

await fetch(url, {
  next: {
    revalidate: 86400,
    tags: [`category-${subCategory}`],
  },
});