楼上发的三张图都是 React 刚移除 experimental 前缀的 Server Actions 以及配套的 useFormStatus 那些吧
我已经尝试使用 RSC + Server Actions 开发了有一段时间了。总结下来,使用 Server Actions 的方案,其实不如 tRPC 舒服 —— 都是类似的写法,但是 Server Actions 没有中间件的概念,这意味着鉴权啥的都需要你在方法里做😂
按 React 的路径,RSC 用于服务端初次渲染,Server Actions 用于突变、表单(失效状态),但还是有一些边界情况,比如说验证后二次加载获取数据这个分支覆盖不到的,这时候要么 dirty 得将 Server Actions 打破边界,当获取函数用,要么还是得写 `route.js` 定义 API 。
P.S 楼上三张图都是直接 FormAction 里传 Server Actions 的用法,实践里太过恶心了……尤其是前后端穿的状态类型不一致——当你需要使用 Action 返回的 State 就会比较恶心了。此外,必须包装一下 useFormState ,才能比较正确的使用传回来的 State (本质上里面得套个 useEffect )。
——所以,个人建议 useTransition 里调用 Server Action —— 里面调用就和调用自然函数一样,而且不需要再封装个 Button 组件用 useFormStatus 以使用 Pending (这玩意必须 Form 子级才能用)。