跳到主要内容

Server Actions

  • Server Actions 是服务器函数组件
  • Server Actions 属于 React 的 Server Functions

到底解决了什么问题​

以前在 Next 里提交表单，常见流程是：

  1. 前端 fetch('/api/xxx')
  2. 你再单独写一个 API Route
  3. API Route 里做校验、写数据库、返回结果
  4. 前端再刷新数据或跳转

用了 Server Actions 后，很多“提交表单 / 新增 / 删除 / 更新”场景可以直接写成一个服务端函数，不必手动再建一层 API Route。Next.js 官方现在就把它定位成处理 forms 和 mutations 的方式

  • 少写一层 API

  • 常用于表单场景、增删改查操作

使用​

  • 在服务端函数里加 'use server'
  • 'use server' 可以写在函数顶部，也可以写在文件顶部

相关问题​

  • 能否客户端组件中使用？
    • 如果你要在客户端组件里调用 Server Action，需要把函数放到一个文件顶部带 'use server' 的专门模块里，再导入到客户端组件