从服务器向客户端组件传递函数 Next 13

Question

根据应用程序目录的 Next.js docs：

“只要有可能，我们建议在服务器组件内获取数据。服务器组件始终在服务器上获取数据。”

这很棒，因为我正在使用外部 API（我无法更改 CORS 策略 - 允许来源...）。

我有一个带有表单（客户端组件）的页面（服务器组件），我正在尝试使用服务器组件访问 API。

首页

import Form from './Form';

export default function Home() {
   handleSubmit = () => {...submit logic}
   return <Form onSubmit={handleSubmit} />
}

表单组件

'use client'

export default function Form({ onSubmit }) {
 return <form onSubmit={handleSubmit}>...</form>
}

当我尝试将

handleSubmit

函数传递给客户端组件时，出现此错误：

Functions cannot be passed directly to Client Components because they're not serializable.

1. 我不确定这意味着什么。
2. 有没有办法将函数传递给客户端组件？
3. 我需要从服务器组件获取，因为 API 有 CORS 策略。是否有可能实现我想要实现的目标？

Answer 1

您的目录中有

error.js

吗？ 在文件顶部添加

use client

。

请参阅此处的参考： https://github.com/vercel/next.js/issues/42408 https://beta.nextjs.org/docs/rendering/server-and-client-components

希望这有帮助。

Answer 2

3. 我需要从服务器组件获取，因为 API 有 CORS 策略。是否有可能实现我想要实现的目标？

CORS 策略适用于任何传入请求（无论请求来自前端还是服务器组件都无关紧要）。

您将在函数中使用什么 HTTP 方法？如果是 POST、PUT 或 DELETE，您绝对不需要在服务器组件中执行此操作（服务器组件的目的是通过发送已加载的数据来优化 SEO - 这称为服务器端渲染）。

如果这是一个 GET，您想实现什么目标？根据用户选择填写的内容动态加载数据？

如果是这样，我认为在客户端执行此操作会更容易。否则你不需要表格。

Answer 3

在家里做：

import Form from './Form';

handleSubmit = () => {
   'use server';

   ...submit logic
}

export default function Home() {
   return <Form onSubmit={handleSubmit} />
}

Answer 4

从服务器传递到客户端组件的属性需要可序列化。这意味着函数、日期等不能直接传递给客户端组件。

https://nextjs.org/docs/getting-started/react-essentials

虽然确实建议在服务器端完成数据获取，但将服务器端文件中编写的函数传递给客户端组件并没有帮助。 仍然要在客户端组件中运行。 要在服务器端获取数据，

在服务器组件中执行，而不仅仅是服务器函数

。然后将任何必要的数据传递给客户端组件。这种设计就是为什么从服务器组件传递到客户端组件的数据必须是可序列化的（就像从 API 端点返回的数据一样）。不要将函数从服务器组件传递到客户端组件。