Next.js中的 Server Actions

前言

Server Actions 不算是 RSC 组件中获取数据的方式。而是一种函数，里面定义了 use server 的指令。相当于一种 RPC, 通过客户端调用，实际在服务端执行。

好处

  • 可以在一次 http 请求中，实现数据的 mutation 和 query
  • 不需要定义 api 路由和参数， 实现类似 RPC 的体验
  • 不需要等待 hydration 加载，就可以操作

什么是 Server Actions

特征是函数的内部，有 use server 指令。或者创建一个专门管理 action 的文件，顶部带有 use server 指令。

async function addToCart(data) {
  "use server";
  // ...
}

这种方法， 是在客户端调用, 比如传递给 form 的 action， 但实际在服务端执行，相当于触发了一个 post 方案。

When calling a Server Action on the client, it will make a network request to the server that includes a serialized copy of any arguments passed. If the Server Action returns a value, that value will be serialized and returned to the client.

客户端什么地方可以使用 Server Actions

Server Actions are not limited to

and can be invoked from event handlers, useEffect, third-party libraries, and other form elements like

就当作是一种新的和服务端交互的方式。这里有一些例子： Data Fetching: Server Actions and Mutations | Next.js

相比于 API 的优势

从架构上， 更加简单了。从交互上， 都是客户端发起了请求，获取数据。 “ API Routes vs Server Actions - Next.js Supabase

简单来说，nextjs 推荐： Use API Routes when fetching data, and Server Actions when performing actions/mutations.

但我觉得 API 更加的清晰。

实现原理

通过 POST 的方式， 在当前页面的 PATH 下，提供了一个入口，payload 中会带上 ACTION_ID_447e71d8744a6a13b33094b3017e763b99e7caf5 来区分调用的 action.

如何定义

‘use server’ directive – React

You can place the directive at the top of an async function to mark the function as a Server Action, or at the top of a separate file to mark all exports of that file as Server Actions.

使用场景

  • 通过 form 的 action 属性，实现数据的提交
  • 通过 props 传递给 client component
  • 通过 revalidating 的方式，实现数据的更新, 只有调用了 revalidateTag 页面就会刷新， 然后有对应的 cache 才会更新

结合 form 的 action

传递给 form 的 action 属性。

单独使用

  • 放在 event handler 中
  • useEffect 中

总结

初期可以不使用这种新特性，保持之前的客户端提交方案， 这样和一些表单控件也能很好的结合。