Having the cache() function semantics parallel to the use cache directive

[IAlphaOmegaI]

import { retrieveAuthToken } from "@/server/auth";
import { unstable_cacheLife, unstable_cacheTag } from "next/cache";

type UnwrapPromise<T> = T extends Promise<infer U> ? U : T;
type ExtractFunctionParams<F> = F extends (
  authorization: string,
  ...args: infer P
) => unknown
  ? P
  : never;

type CacheOptions = {
  tag: string;
  life?: Parameters<typeof unstable_cacheLife>[0];
};
export const withCache = <
  F extends (authorization: string, ...args: never[]) => Promise<unknown>,
>(
  fn: F,
  options: CacheOptions,
) => {
  const { tag, life } = options;

  const retrieve = async (
    authorization: string,
    ...args: ExtractFunctionParams<F>
  ): Promise<UnwrapPromise<ReturnType<F>>> => {
    "use cache";
    unstable_cacheTag(tag);
    life && unstable_cacheLife(life);
    const data = await fn(authorization, ...args);
    return data as UnwrapPromise<ReturnType<F>>;
  };

  return async (...args: ExtractFunctionParams<F>) => {
    "use server";
    const authorization = await retrieveAuthToken();
    const result = await retrieve(authorization, ...args);
    return result;
  };
};

trying to reimplement the cache function semantics with the use cache directive is currently impossible.
While the directive is really nice in server components and for caching jsx, for functions such as

export const getAllAffiliations = withCache(
  async (
    authorization,
    pager: Pager,
    filter: UserQueryOptions,
  ): Promise<Result<PaginatedResponse<Affiliation>>> => {
    try {
      const init = await buildRequestInit(authorization);
      const query = buildPaginationQuery(pager, {
        type: filter.type ?? "participant",
      });

      const response = await fetch(
        `${process.env.PROVIDER_HOST}/affiliation?${query.toString()}`,
        init,
      );
      const users: PaginatedResponse<Affiliation> = await response.json();
      return { success: true, data: users };
    } catch (error) {
      return {
        success: false,
        error: error?.toString() ?? "Unknown error",
      };
    }
  },
  { tag: "affiliations" },
);

is more a hustle than anything.
I do like the use cache directive but i feel it is a bit compiler magic and that it would better be left at the hands of the engineer to implement it through a function like we had with the unstable_cache.

[IAlphaOmegaI]

Error: Functions cannot be passed directly to Client Components unless you explicitly expose it by marking it with "use server". Or maybe you meant to call this function rather than return it.
  [..., undefined, function]
                   ^^^^^^^^
    at withCache (cache.ts:35:10)
    at [project]/apps/web/src/server/users.ts [app-rsc] (ecmascript) (rsc://React/Prerender/file:///Users/xhurianshaba/Development/work/zerapy/apps/web/.next/server/chunks/ssr/%5Broot%20of%20the%20server%5D__e6710c._.js?9:389:188)
    at instantiateModule (runtime.ts:242:19)
    at getOrInstantiateModuleFromParent (runtime.ts:305:10)
    at esmImport (runtime-utils.ts:214:18)
    at [project]/apps/web/src/app/(main)/participants/page.tsx [app-rsc] (ecmascript) (rsc://React/Prerender/file:///Users/xhurianshaba/Development/work/zerapy/apps/web/.next/server/chunks/ssr/%5Broot%20of%20the%20server%5D__e6710c._.js?13:673:141)
    at instantiateModule (runtime.ts:242:19)
    at getOrInstantiateModuleFromParent (runtime.ts:305:10)
    at esmImport (runtime-utils.ts:214:18)
    at [project]/apps/web/src/app/(main)/participants/page.tsx [app-rsc] (ecmascript, Next.js server component) (rsc://React/Prerender/file:///Users/xhurianshaba/Development/work/zerapy/apps/web/.next/server/chunks/ssr/%5Broot%20of%20the%20server%5D__e6710c._.js?14:738:32)
    at instantiateModule (runtime.ts:242:19)
    at getOrInstantiateModuleFromParent (runtime.ts:305:10)
    at esmImport (runtime-utils.ts:214:18)
    at instantiateModule (runtime.ts:242:19)
    at getOrInstantiateModuleFromParent (runtime.ts:305:10)
    at esmImport (runtime-utils.ts:214:18)
    at instantiateModule (runtime.ts:242:19)
    at instantiateRuntimeModule (runtime.ts:318:10)
    at Object.getOrInstantiateRuntimeModule (runtime.ts:337:10)
    at Object.<anonymous> (page.js?17:13:26)
    at resolveErrorDev (react-server-dom-turbopack-client.browser.development.js:1858:46)
    at processFullStringRow (react-server-dom-turbopack-client.browser.development.js:2426:17)
    at processFullBinaryRow (react-server-dom-turbopack-client.browser.development.js:2414:7)
    at progress (react-server-dom-turbopack-client.browser.development.js:2661:17)

The above error occurred in the <__TURBOPACK__default__export__> component. It was handled by the <ReactDevOverlay> error boundary.

This is the error I'm getting for anyone curios.

I feel as when the directive was though out, it was thought for an ideal world, for caching functions that do no rely on dynamic data and do not rely on authorization, but in the real world, I'll want to cache this items to every users session, as they are long sessions and these are huge pieces of data, so while the argument of this is to dynamic to cache might arise, I think the caching behavior should allow for caching any amount of data, for any amount of time.

I know caching is a bit of a sensitive object with the next.js team, but it shouldn't be this hard deciding the right way to cache things. Please reconsider at least having a similar implementation to withCache work in parallel so we can have the best of both worlds.

[IAlphaOmegaI]

And this leads me to another discussion but directives are not it. A wrapper function or even a decorator but not directives

[IAlphaOmegaI]

export const upsertAffiliationsFromCache =
  async (
    authorization: string,
    pager: Pager,
    filter: UserQueryOptions,
  ): Promise<Result<PaginatedResponse<Affiliation>>> => {
    "use cache";
    cacheTag("affiliations");
    try {
      const init = await buildRequestInit(authorization);
      const query = buildPaginationQuery(pager, {
        type: filter.type ?? "participant",
      });

      const response = await fetch(
        `${process.env.PROVIDER_HOST}/affiliation?${query.toString()}`,
        init,
      );
      const users: PaginatedResponse<Affiliation> = await response.json();
      return { success: true, data: users };
    } catch (error) {
      return {
        success: false,
        error: error?.toString() ?? "Unknown error",
      };
    }
  };

export const getAllAffiliations = async (
  pager: Pager,
  filter: UserQueryOptions,
) => {
  const token = await retrieveAuthToken();
  return upsertAffiliationsFromCache(token, pager, filter);
};

Here is how the same behaviour can be achieved , notice the wrapper function just to access the dynamic data and the repetitiveness of the use cache directive call, there should be a better way to achieve this!