Next16优化了server action的行为

42 阅读1分钟

server action是next中一项非常重要的功能
一个action必须是一个以'use server'修饰的异步函数 并且其参数和返回值都必须可序列化

无论客户端还是服务端 都可以直接调用action 就像它是一个普通的异步函数一样 ,但客户端组件调用一个action的实际行为是发起一个请求 由服务端调用action函数 再把值返回给客户端

action可以作为参数直接传给客户端(即使它并不是plain object) 服务端组件也可以简单地构建一个action作为事件

const Page: FC = () => {
  return (
    <Button
      onClick={async () => {
        'use server'
        return 1
      }}
    >
      1
    </Button>
  )
}

突破了只有客户端可以传输事件函数的限制

不过 之前的server action一直有一个不足 它会对action参数做强制检测 只要不是可序列化的对象 都会报错 生产环境也会报错

<Button onClick={action} />

事件对象e不可序列化 只要点击就必定报错 必须创建客户端组件再包裹一层
不过现在对这一点已经改善了 上述代码可以正确执行
只要action内部不试图序列化复杂对象(例如console.log(e)之类的) 就不会报错 现在跨端处理事件更简单了

另外 现在server action抛异常不会导致全局页面的崩溃了 它的行为几乎完全等同于一个普通的异步函数