Next.js - Parallel Routesで条件に応じてServer Componentsを実行しないようにしたい

---------------------------------------------
何かの詳細情報
---------------------------------------------
| Tab A | Tab B | Tab C |
| コンテンツはタブ選択した際に取得したい |
---------------------------------------------

- app 
  - list
    - [id]
      - page.tsx
      - layout.tsx
      - @a
        - page.tsx
      - @b
        - page.tsx
      - @c
        - page.tsx

'use client';

export default function Layout({
  children,
  a,
  b,
}: {
  children: React.ReactNode;
  a?: React.ReactNode;
  b?: React.ReactNode;
  c?: React.ReactNode;
}) {
  const searchParams = useSearchParams();
  const tab = searchParams.get('tab') ?? 'a';
  return (
    <>
      {children}
      <Tabs
        selectedTab={tab}
      />
      <TabPanel>
        {match(tab)
          .with('a', () => a)
          .with('b', () => b)
          .with('c', () => c)
          .otherwise(() => false)}
      </TabPanel>
    </>
  );
}

export default async function PageA({ searchParams }) {
  const tab = searchParams?.tab ?? 'a';
  if (tab !== 'a') return;
  // awesome api call
  return <PageAComponent />
}

// 詳細画面のpage.tsx
export default async function Page({ searchParams }) {
  const tab = searchParams.'tab' ?? 'a';
  return (
    <>
      <PageDeital />
      <Tabs
        selectedTab={tab}
      />
      <TabPanel>
        <Suspense fallback={<Loading />}>
          {match(tab)
            .with('a', () => <TabA />)
            .with('b', () => <TabB />)
            .with('c', () => <TabC />)
            .otherwise(() => false)}
        </Suspense>
      </TabPanel>
    </>
  );
}

// TabAのServer Component
export async function TabA() {
  // awesome api call
 return <TabAComponent />
}