Nextjs 16 use cache

  header: publicProcedure.query(async ({ ctx }) => {
    const cmsData = await ctx.cms.getJSON<HeaderProps>(
      "/component/menus/header"
    );

    const { error, data } = await headerPropsSchema.safeParseAsync(cmsData);
    if (error) {
      throw new TRPCError({
        code: "PARSE_ERROR",
        message: "Failed to parse header data",
        cause: error,
      });
    }

    return data;
  }),

import DefaultHeader from "@frontend/components/menus/header";
import { HeaderSkeleton } from "@frontend/components/menus/header/HeaderSkeleton";
import { api } from "@frontend/trpc/server";
import { Suspense } from "react";

async function HeaderComponent() {
  "use cache";

  const headerData = await api.menus.header();

  return <DefaultHeader {...headerData} />;
}

export function Header() {
  return (
    <Suspense fallback={<HeaderSkeleton />}>
      <HeaderComponent />
    </Suspense>
  );
}

const createContext = cache(async () => {
  const heads = new Headers(await headers());
  heads.set("x-trpc-source", "rsc");

  return createTRPCContext({
    headers: heads,
  });
});