Question about cacheComponents and calling cookies()/headers()

Hi,

Just to confirm I’m not missing something here with the cacheComponents flag in canary.

From what I understand, I can’t call cookies() or headers() inside a component if that component is used inside another component that has the "use cache" directive. For example, this doesn’t work:

async function UserData() {
  // getSession calls headers()
  const session = await getSession();
  return <div>{session?.user?.email}</div>;
}

export default async function Test() {
  "use cache";

  return (
    <main>
      <h1>Static content</h1>

      <Suspense>
        <UserData />
      </Suspense>
    </main>
  );
}

Is it expected behavior that this fails, or should it actually work and I’m doing something wrong?

To make it work, I need to move "use cache" to the static component, like this:

async function StaticComponent() {
  "use cache"
  return <div>static content</div>;
}

export default async function Test() {
  return (
    <main>
      <StaticComponent />

      <Suspense>
        <UserData />
      </Suspense>
    </main>
  );
}

Is that the right approach?

Thanks.