您好，我正在努力找出如何在 Nextjs 13 中使用服务器操作成功进行数据突变后调用 toast。toast 是一个客户端组件，因为它使用钩子/上下文。
我该怎么做呢？
我有一个名为 CampaignTable 的客户端组件。CampaignTable 组件需要一个列对象来呈现列。在我的列对象中，我导入了一个名为 CampaignActions 的服务器组件。这是一个简单的下拉菜单，我在其中执行 api 调用来获取一些数据并在弹出窗口中使用该数据。
但是，由于 API 调用是在 CampaignActions 组件中执行的，因此我的页面变得非常慢，并且收到一条错误消息：
错误：在初始渲染期间无法调用服务器函数。这将创建一个获取瀑布。尝试使用服务器组件将数据传递给客户端组件。
然而，据我了解，该组件已经是一个 React Server 组件。我可以通过删除异步并在顶级页面中执行 api 调用并将数据作为 props 向下传递来解决该问题，例如：
页面 > 营销活动表 > 营销活动操作。
但我想知道为什么我的方法是错误的/导致问题。因为如果我可以在需要它的组件中执行 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}/>
)
}
}), …当用户第一次访问网站时，他们可以选择接受或拒绝跟踪 cookie。如果他们拒绝，我会设置一个值为 false 的 cookie。我想使用 cookie 的值来有条件地运行 gtag 脚本。我尝试访问自定义 document.js 中的 cookie，但 getInitialProps 中的 req/res 未定义，并且 document.js 仅在服务器端运行，因此我无法访问浏览器 cookie。我怎样才能有条件地注入谷歌分析脚本？
class MyDocument extends Document {
static async getInitialProps (ctx) {
const initialProps = await Document.getInitialProps(ctx);
return { ...initialProps, lang: ctx.query.lng}
}
render () {
return (
<Html lang={this.props.lang}>
<Head>
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Poppins&display=swap"
/>
<script
async
src={`https://www.googletagmanager.com/gtag/js?id=${GA_TRACKING_ID}`}
/>
<script
dangerouslySetInnerHTML={{
__html: `
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', '${GA_TRACKING_ID}', {
page_path: window.location.pathname,
});
`,
}}/>
</Head>
<body> …