Suppose I have a server component ServerComponent that has two client components children like the following ClientComponentA and ClientComponentB.

// page.tsx

export default async function ServerComponent(){
  // Making heavy computation & database queries
  return (
    <>
      <ClientComponentA />
      <ClientComponentB />
    </>
  );
}

Question:
How can I share state between ClientComponentA and ClientComponentB while keeping the parent component a server component?

If the parent component ServerComponent was a client component, I could either:
- Lift the state up to the parent.
- OR use context.

But since the parent is a server component, it seems like it severs the connection between its children components.

Note: I know adding "use client" will "solve" it. I'm looking for a way to share the state while keeping the parent component a server component (for performance reasons).