<ClientComponent>
  <ServerComponent />
<ClientComponent />

// page.tsx
import { Suspense } from "react";
import { TabA } from "~/components/tab-a";
import { TabB } from "~/components/tab-b";
import { Tabs } from "~/components/tabs";

export default function Home() {
  return (
    <main className="flex min-h-screen flex-col items-center justify-between p-24">
      <Tabs
        tabs={[<SuspendedTabA key={"taba"} />, <SuspendedTabB key={"tabb"} />]}
      />
    </main>
  );
}

const SuspendedTabA = () => {
  return (
    <Suspense fallback={<p>Loading tab...</p>}>
      <TabA />
    </Suspense>
  );
};

const SuspendedTabB = () => {
  return (
    <Suspense fallback={<p>Loading tab...</p>}>
      <TabB />
    </Suspense>
  );
};

// tabs.tsx
"use client";

import { Tab } from "./tab";

export const Tabs = ({ tabs }: { tabs: React.ReactNode[] }) => {
  return (
    <div>
      <h1 className="text-xl">Tabsss!</h1>
      <div>
        {tabs.map((tab, index) => (
          <Tab key={index}>{tab}</Tab>
        ))}
      </div>
    </div>
  );
};

// tab.tsx
"use client";

export const Tab = ({ children }: { children: React.ReactNode }) => {
  return <div>{children}</div>;
};

// tab-a.tsx
"use client";

export const TabA = () => {
  return <div>Tab A</div>;
};