Is 'use cache' directive enabled in prod?

[VincentCordobes]

I enabled the experimental useCache directive, which works as expected when running locally.
However, once deployed on Vercel, nothing is cached; data cache stats stay to 0.

Here is an example of how I use it:

async function getLibraryTabs(page: number, userId: string) {
  "use cache";

  cacheLife("days");
  cacheTag(`user-owned-tabs-${userId}`);

  const query = db
    .selectFrom("tab")
    .where("tab.authorId", "=", userId)
    .selectAll()
  const result = await execWithPagination(query, { page });
  return result;
}

export default async function Library(props: Props) {
  const session = await verifySession();
  const searchParams = await props.searchParams;
  const page = Number(searchParams?.page) || 1;
  const result = await getLibraryTabs(page, session.user.id);

  return <TabList {...result} userId={session.user.id} />;
}

Next version: 15.4.2-canary.6
Project URL: https://drumtabs.app

Am I missing something here ?

[SametDulger]

Recommended Way: Use cache() from next/cache
Instead of using the "use cache" directive, wrap your function with cache() like this:

import { cache } from 'next/cache';

const getLibraryTabs = cache(async (page: number, userId: string) => {
  const query = db
    .selectFrom("tab")
    .where("tab.authorId", "=", userId)
    .selectAll();

  const result = await execWithPagination(query, { page });
  return result;
});

Why this works well:

This enables response memoization based on parameters (page, userId).

It works reliably in production on both custom servers and Vercel.

It doesn’t rely on unstable experimental flags.

Optional: Tagging + Revalidation
If you want to cache data and manually revalidate it later (e.g. after an update), you can use cacheTag and revalidateTag:

import { cache, cacheTag, revalidateTag } from 'next/cache';

const getLibraryTabs = cache(async (page: number, userId: string) => {
  cacheTag(`user-owned-tabs-${userId}`);

  const query = db
    .selectFrom("tab")
    .where("tab.authorId", "=", userId)
    .selectAll();

  const result = await execWithPagination(query, { page });
  return result;
});

Then later, when you update data:

revalidateTag(`user-owned-tabs-${userId}`);

[icyJoseph]

Hi, yeah it is enabled, but it is a different type of caching, in-memory.

Are you using the combined feature, cacheComponents, or only useCache?

• https://nextjs.org/blog/next-15-4#preview-upcoming-features

When cacheComponents is active fully, you should see a more intuitive behavior, and in this setting, in-memory caching makes more sense as a default. I think you may want to try out 'use cache: remote' and see how that behaves.

Note that all of this is still experimental though - and should be tested against the latest canary possible.

[VincentCordobes]

@icyJoseph I am using only the useCache, not cacheComponents.
I tried cacheComponents but, if I understand correctly, it requires having a loading.tsx for async components. And in one particular case I'd rather have a 'blocking' one (I use the useLinkStatus as user feedback)

I tried use cache: remote but it still doesn't use vercel data cache. unstable_useCache does work, though.

[icyJoseph]

There's a tab called Runtime Cache in the o11y section (next to the Data Cache tab) - that one should show some hits - I think

[VincentCordobes]

Unfortunately not :/