我有一个名为CampaignTable的客户端组件。CampaignTable组件需要一个columns对象来呈现列。在我的columns对象中，我导入了一个名为CampaignActions的服务器组件。这是一个简单的下拉菜单，我在其中调用了一个API来获取一些数据，并在弹出框中使用这些数据。
然而，由于在CampaignActions组件中执行的API调用，我的页面变得非常慢，我得到一个错误：

• 错误：服务器函数无法在初始呈现期间调用。这将创建一个fetch瀑布。尝试使用服务器组件将数据传递给客户端组件。*

然而，据我所知，该组件已经是一个React服务器组件。我可以通过删除async并在顶层页面中执行API调用并将数据作为props向下传递来解决这个问题，例如：
页面> CampaignTable > CampaignActions。
但我想知道为什么我的方法是错误的/引起问题。因为如果我能在需要它的组件中执行API调用，而不是将它传递下去，那就太好了。
这是我的代码

'use client'
import React from "react";

const CampaignTable = (props: CampaignTableProps) => {
const campaignColumns = useMemo(() => (
    [
        columnHelper.accessor("id", {
            header: () => "ID",
            cell: info => info.getValue()
        }),
        columnHelper.display({
            id: "socials",
            header: () => "Actions",
            cell: ({row}) => {
                return (
                    <CampaignActions {...row.original}/>
                )
            }
        }),
    ]
), [])

return (

    <DataTable  
        data={props.campaigns || []}
        columns={campaignColumns}
    />
)}

字符串
我的CampaignActions代码

async function CampaignActions(props: Campaign){
const {data: clients} = await getAllClients().then((res) => res);
return (
    <DataTableActions
        edit={{
            onEdit: async () => {
                await openUpdateCampaignModal({
                    ...props,
                    clients: clients ?? [],
                })
            }
        }}
    />
)}

型