表单操作：用变更操作替代 API 路由

在传统的 Next.js 应用中，表单提交需要一个带有 onSubmit 处理程序的客户端组件，该处理程序调用 fetch()，将数据 POST 到 API 路由。这种模式虽然可行，但需要分别编写和维护客户端获取逻辑与服务器端路由处理程序。

使用服务器操作时，您可以用一个函数替代获取请求和 API 路由。表单元素将服务器操作作为其 action 属性传入：<form action={serverAction}>。React 会拦截提交，并自动将表单数据传递给该操作。

通过表单触发服务器操作时，它会自动接收一个 FormData 对象作为参数。您可以使用 formData.get('email') 访问单个字段，该方法会以字符串形式返回值。所有标准 FormData 方法都可用，包括用于多选字段的 getAll()。

服务器操作可以返回客户端能够使用的可序列化值。返回类似 { error: 'Email already exists' } 的错误对象，或类似 { success: true } 的成功标志，可以让客户端相应地更新界面，而无需整页重新加载。

由于表单操作是服务器操作，承载表单的页面组件无需成为客户端组件。服务器会将表单渲染为静态 HTML，只有错误显示等交互部分需要客户端 JavaScript。这会显著减小客户端包的大小。

即使未启用 JavaScript，带有 action={serverAction} 的表单也能正常工作。浏览器会执行标准的 HTML 表单 POST，服务器执行该操作，然后返回更新后的页面。这种真正的渐进式增强意味着表单在所有环境中都能平稳降级。

服务器操作修改数据后，必须刷新缓存的页面数据。在操作内部调用 revalidatePath('/dashboard') 会使 Next.js 针对该路径的缓存失效，从而让下一次请求获取最新数据。这是在数据变更后使服务器渲染页面保持最新的标准方式。

revalidateTag('user-data') 提供了比 revalidatePath 更细粒度的缓存失效机制。您可以为获取调用添加 next: { tags: ['user-data'] } 标签，然后在服务器操作内部一次性使所有带有该标签的数据失效，而不论这些数据由哪些路径显示。

成功完成数据变更后，服务器操作可以通过从 next/navigation 模块调用 redirect('/success')，将用户重定向到新页面。此重定向在服务器端处理，因此浏览器接收到的是正确的导航响应，而不是客户端重定向。

服务器操作并不局限于表单提交。对于按钮点击和其他非表单触发方式，请将操作调用包装在 startTransition(() => action(arg)) 中。这样会将导航标记为过渡，使 React 能够在服务器执行操作期间继续显示当前界面。

服务器操作是执行服务器端验证的合适位置。请验证 FormData 字段；如果验证失败，则返回验证错误；只有所有字段都有效时，才继续执行数据变更。Zod 等库在这里集成得很好：将 FormData 解析为类型化模式，并在失败时返回错误映射。

通过表单提交触发服务器操作时，它会接收什么作为参数？

服务器操作取代了用于表单数据变更的获取请求 + API 路由模式。表单的 action 属性可以直接接受服务器操作，而该操作会接收一个 FormData 对象。操作会返回可序列化结果以更新客户端界面，支持使用 revalidatePath 和 revalidateTag 使缓存失效，并且无需 JavaScript 也能通过渐进式增强工作。