We can nest Server Components inside Client Components. The trick is to use children, so that the Client Component has as children nodes that he didn't create himself (and therefore doesn't depend on because it doesn't import them).

"use client";

import { useState } from "react";

type Props = {
  children: React.ReactNode;
};
export default function Collapsible({ children }) {
  const [collapsed, setCollapsed] = useState(false);
  return <div onClick={() => setCollapsed((x) => !x)}>{collapsed || children}</div>;
}

Then in a Server Component:

<Collapsible>{/* Here you can put server components! */}</Collapsible>