beizhu
type
Post
status
Published
date
Dec 1, 2023
slug
summary
Server Action 是 服务器上运行的函数，但我们可以从客户端调用它，就像普通函数一样。它允许我们在服务器上运行代码，而无需创建 API 端点
tags
Next.js
category
技术
icon
password
WHAT?
Server Action 是 服务器上运行的函数，但我们可以从客户端调用它，就像普通函数一样。
它允许我们在服务器上运行代码，而无需创建 API 端点
对于 Next.js 开发者来说，这是一个全新的 DX，它可能改变游戏规则。
can?
- 写入数据库: 您可以直接从客户端写入数据库，而无需创建 API 端点 - 只需在服务器操作中定义逻辑即可。
- 服务器逻辑: 执行任何与服务器相关的业务逻辑，例如发送电子邮件、创建文件等。
- 调用外部 API: 您可以直接从服务器操作调用外部 API，而无需创建 API 端点
可能会有一些优势
- 无需创建 API 端点：您无需创建 API 端点即可运行服务器代码。
- 跳转到函数：您只需在代码编辑器中单击服务器操作即可跳转到它的定义，而无需在代码库中搜索它。
- 类型安全：您可以使用 TypeScript 定义服务器操作的参数和返回值，Next.js 将自动为您验证它们。
- 更少的代码：您可以编写更少的代码，因为您需要更少的样板来运行服务器代码 - 您只需定义一个函数及其参数 - 然后从客户端调用它。
How
example1:
example2:
这个server action 的执行是是使用HTTP流发送的。
会有一些需要注意的点
- 使用
POST方法，
- 需要一些标头，例如
Next-Action包含某种服务器操作 ID 的标头，
- 获取要从请求正文传递给函数的参数（作为 JSON）。
curl 'http://localhost:3000/xxxxxx/xxxx' \
-H 'Accept: text/x-component' \
-H 'Cache-Control: no-cache' \
-H 'Connection: keep-alive' \
-H 'Next-Action: 0e6d574cf350537e5c09a5ffd6492e04b5af9326' \
-H 'Next-Router-State-Tree: %5B%22%22%2C%7B%22children%22%3A%5B%22(withLayout)%22%2C%7B%22children%22%3A%5B%22xxxx%22%2C%7B%22children%22%3A%5B%22xxxx%22%2C%7B%22children%22%3A%5B%22__PAGE_%22%2C%7B%7D%5D%7D%5D%7D%5D%7D%5D%7D%2Cnull%2Cnull%2Ctrue%5D' \
-H 'Next-Url: /tools/gitee' \
-H 'Origin: http://localhost:3000' \
-H 'Pragma: no-cache' \
-H 'Referer: http://localhost:3000/xxxxxx/xxxx' \
--data-raw '[{"componentName":"xxx"}]' \
--compressed
返回结果为：
原理其实就和我们远程过程调用 (RPC)一样。
Last
但我也在想，你都这样传输了，安全性怎么保证，以前的router handler 你可以有中间件的方式至少去整体校验安全性。这样你也得校验所有传输过来的参数，这个取决于使用场景，但是这么个使用，安全性上一定是需要注意的。