Does the "use cache" directive work on server actions and can a cached function be used inside proxy.ts??

[pneumaticos]

Summary

I keep running into an error: cacheTag() can only be called inside a "use cache" function

"use server"

import { getToken as getTokenNextjs } from "@convex-dev/better-auth/nextjs"
import { api } from "convex/_generated/api"
import { createAuth } from "convex/auth"
import { fetchQuery } from "convex/nextjs"
import { cookies } from "next/headers"
import { connection } from "next/server"
import crypto from "crypto"
import { cacheTag, revalidateTag } from "next/cache"
import { logInfo } from "@/lib/logger"

export const getToken = async () => {
  await connection()
  return await getTokenNextjs(createAuth)
}

export async function getCachedSession(userCacheToken: string, token: string) {
  "use cache"
  cacheTag(`user-session:${userCacheToken}`)

  logInfo("fetchedSessionFromDB")
  const session = await fetchQuery(api.queries.auth.index.getSessionUser, {}, { token })
  return session
}

export const getSession = async () => {
  const token = await getToken()
  const cookieStore = await cookies()
  const userToken = cookieStore.get("better-auth.convex_user_token")?.value

  if (!userToken) {
    const session = await fetchQuery(api.queries.auth.index.getSessionUser, {}, { token })

    if (session?.user?.id) {
      const sessionToken = await createSession(session.user.id)
      const cachedSession = await getCachedSession(sessionToken, token)
      return cachedSession
    }

    return session
  }

  const session = await getCachedSession(userToken, token)
  return session
}

export async function createSession(userId: string) {
  const sessionToken = crypto
    .createHash("sha256")
    .update(userId + crypto.randomBytes(32).toString("hex"))
    .digest("hex")
  ;(await cookies()).set("better-auth.convex_user_token", sessionToken, {
    httpOnly: true,
    secure: true,
    path: "/",
    sameSite: "strict",
  })

  return sessionToken
}

export async function invalidateSessionCache(userToken: string) {
  revalidateTag(`user-session:${userToken}`, "max")
}

Despite having used the "use cache" directive and setting cacheComponents to tre in my next config, I keep running into an error:
cacheTag() can only be called inside a "use cache" function

What am I doing wrong?

Additional information

I am on: Next v16.0.7

Example

No response

[anntnzrb]

Move the cached function to a separate file without "use server" directive. The "use cache" directive does NOT work when used inline inside a file marked with "use server" at the top - the directives are mutually exclusive at file scope level. Create a new file (e.g., lib/cache.ts) with "use cache" at the top containing your cached function, then import and use it in your "use server" file.

[pneumaticos]

inside cached/session.ts, I have:

"use cache";

import { logInfo } from "@/lib/logger";
import { api } from "convex/_generated/api";
import { fetchQuery } from "convex/nextjs";
import { cacheTag } from "next/cache";

export async function getCachedSession(userCacheToken: string, token: string) {
	cacheTag(`user-session:${userCacheToken}`);

	logInfo("fetchedSessionFromDB");
	const session = await fetchQuery(
		api.queries.auth.index.getSessionUser,
		{},
		{ token },
	);
	return session;
}

But I still keep running into the same error:

1/1

Next.js 16.0.7
Turbopack
Runtime Error

"cacheTag()" can only be called inside a "use cache" function

src/app/api/cached/session.ts (9:10) @ getCachedSession


   7 |
   8 | export async function getCachedSession(userCacheToken: string, token: string) {
>  9 | 	cacheTag(`user-session:${userCacheToken}`);
     | 	        ^
  10 |
  11 | 	logInfo("fetchedSessionFromDB");
  12 | 	const session = await fetchQuery(

[icyJoseph]

This should most definitely work. I wonder how are you using it though? Is this in a Route Handler?

I have:

'use server'
import { cacheTag } from 'next/cache'

 async function foo() {
  'use cache'
  cacheTag('foo')

  return 'foo'
}


export async function bar(){
  const data = await foo()
  return data
}

Using it like:

'use client'
import { bar } from './action'

export default function Home() {
  return (
  <div>
      <button onClick={() => bar().then(console.log)}>Foo</button>
    </div>
  );
}

It works and builds, no issue. Maybe you've found some edge case where the bundler is not "bundling" correctly? care to show some more of how this is used?

[pneumaticos]

I am reading the session inside proxy.ts file:

export async function proxy(request: NextRequest) {
	const { pathname } = request.nextUrl;

	const session = await getSession();

...

I understand that proxy runs on nodejs so technically calling the function inside it should run.

Also, I noticed that when I remove cacheTag, it fetches from the cache (The log starts with Cache...) which makes me believe that it works. I just can't seem to figure out why it breaks when I add cacheTag.

I am currently using unstable_cache as a temporary solution and it's working perfectly.

[icyJoseph]

I can't reproduce this:

Also, I noticed that when I remove cacheTag, it fetches from the cache (The log starts with Cache...) which makes me believe that it works. I just can't seem to figure out why it breaks when I add cacheTag.

Are you perhaps also calling this function elsewhere? Causing a misattribution?

AFAIK, Cache semantics, including Data Cache (the one fetch uses) are not supported in Proxy/Middleware. Cache components semantics was never going to work in middleware, because that uses only edge runtime. Now that Proxy forces run on nodejs and middleware may run on that runtime too, it is understandable that this confusion would happen.

I'll do some more investigation though, and likely end up with a docs update.

[pneumaticos]

As you can see from my initial post, I am using:

import { connection } from "next/server";

export const getToken = async () => {
	await connection();
	return await getTokenNextjs(createAuth);
};

Can this affect the function despite using the "use cache" directive at function level?

I also noticed that unstable_cache breaks in production. Have you tried calling a cached function inside proxy.ts?

[icyJoseph]

The thing is that proxy/middleware, were designed initially to be a separate cart. Many Next.js features don't necessarily have a counter part in proxy.

Such is the case for cache components.

Your original title, is about whether or not server actions may use cache directives, and for that the answer is yes.

Calling a Server Function from proxy/middleware, is as good as just calling a regular async function. Does proxy/middleware allow cache directives? It is not supported at the moment.