[网络开发43不断变化。曾经有一段时间，所有内容都在服务器上呈现（PHP、Ruby on Rails）。然后，我们将所有内容移至客户端（带有 React、Vue 的 SPA）。现在，随着 React Server Components (RSC) 和 Next.js App Router 的出现，我们找到了一个强大的中间立场：两全其美。
React 生态系统新时代的皇冠上的宝石是服务器操作。
随着 Next.js 15 的发布，服务器操作不再是实验性的，而是已成为处理数据突变的推荐标准。在这份庞大的指南中，我们将探讨此功能的每一个细节，从基础知识到高级安全性和用户体验标准。如果您仍在编写 8 来处理表单，请准备好淘汰大量样板代码。
服务器操作到底是什么？
简而言之，服务器操作是在服务器上运行的异步函数，但可以直接从客户端或服务器组件调用。
以前，提交表单的流程是：
- 在客户端创建表单组件(9)。
- 为输入创建10状态。
- 创建一个执行 12 的函数11。
- 创建 API 路由文件 (13) 以接收请求、验证并将其保存在数据库中。
- 手动处理错误、加载状态和数据重新验证。
使用服务器操作，流程为：
- 创建一个保存在银行中的函数14。
- 将此函数传递给16的支柱15。
结尾。 Next.js 负责通信、序列化和执行。它是专为 Web 完成的远程过程调用 (RPC)。
Next.js 中的初始配置 15
在 Next.js 15 中，服务器操作已默认启用。您无需更改17。
约定很简单：
- 要定义可导入客户端组件的操作，请创建一个顶部带有
"use server"指令的文件。 - 对于服务器组件中的内联操作，请在函数内添加 19 。
基本示例：动作的“Hello World”
让我们创建一个操作来保存博客文章。创建 20 文件：
0
在你的组件中：
1
请注意，客户端上没有用于提交的 JavaScript。 即使用户在浏览器中禁用 JS（渐进增强），此表单也能正常工作，尽管在现代应用程序中我们很少依赖于此。
充电状态管理 (21)
糟糕的用户体验是点击“保存”却没有得到反馈。由于我们使用的是原生 HTML 属性 22，因此我们没有23 手册。 React 为我们提供了 24 钩子。
注意： 25 必须用在 在 26 内渲染的组件中。
2
现在只需在上一个示例的表单中使用 27 即可。
错误处理和反馈 (28)
如果[数据库44失败怎么办？还是验证？简单地抛出一个错误（29）并不是最好的用户体验。我们希望将错误消息返回到表单。
为此，我们使用钩子 30（以前在实验性 React 中为31）。它允许服务器操作返回在客户端上更新的值。
重构我们的行动：
3
在客户端组件中：
4
缓存重新验证：32 的力量
在旧模型中，突变后，您必须手动重新获取数据或使用 React Query 或 SWR 等库来使缓存失效。
在 Next.js 中，这是内置的。函数33清除该特定路由的缓存。在下次访问时（或立即访问，如果是 SPA 导航），Next.js 会从服务器获取最新数据。 还有34，如果您使用带 (35) 标签的 fetch，它可以为您提供精细控制。
乐观更新 (36)
对于看起来“即时”的应用程序，我们不想等待服务器响应来更新 UI。如果我将一个项目添加到列表中，我想现在就在那里看到它。
挂钩37以一种优雅的方式实现了这一点。
5
如果服务器操作失败，React 会自动将乐观状态回滚到之前的真实状态。它坚固而神奇。
安全：房间里的大象
许多开发人员看着 38 并想：“等等，我是否将我的[数据库 45] 暴露给客户端？”
不会。 服务器操作代码永远不会发送到浏览器。仅公开函数的“签名”（内部 Next.js 参考 URL）。然而，将服务器操作视为API 的公共入口点至关重要。
强制性安全检查表：
-
身份验证：始终检查谁在调用该操作。不要仅仅因为“保存”按钮可见就假设用户已登录。 6
-
授权：用户已经登录，但是他可以*删除这个帖子吗？ 7
-
输入验证：永远不要相信39或传递的参数。使用 Zod 确保数据格式正确。
服务器操作与 API 路由
毕竟，API 路由已经死了吗？
不完全是，但其使用量已大幅减少。
在以下情况下使用服务器操作：
- 你正在处理形式突变。
- 您想要从客户端上的事件调用服务器函数 (40)。
- 您想要 [TypeScript46 端到端输入而不生成 SDK。
在以下情况下使用 API 路由（路由处理程序）：
- 您需要向第三方（webhooks、移动应用程序）公开公共 [REST API47 ]。
- 您需要 React 抽象隐藏的 HTTP 协议的特定功能（例如流式自定义二进制文件、复杂标头）。
结论
Next.js 15 巩固了服务器操作作为近期 Web 开发中最富有成效的变化之一。它们消除了中间层的“粘合代码”（API 路由、获取器、状态管理器），让您能够专注于重要的事情：业务逻辑和用户界面。
通过将服务器操作与 41、42 以及验证与 Zod 相结合，您可以创建具有世界一流用户体验的强大、安全的应用程序，而编写的代码仅为 3 年前编写的代码的一小部分。
未来是服务器端，但体验是客户端。服务器操作是它们之间的桥梁。
您是否已将表单迁移到服务器操作？最大的挑战是什么？留下您的评论！
另请阅读
- [Next.js 中的服务器操作：无需为此维护 API 的突变49
- [Next.js App Router：默认思考服务器指南50
- [Next.js 中的缓存和流式传输：性能成为架构决策51
- [2025 年 React 和 Next.js 的国际化最佳实践（i18n）52
- [什么是 React 服务器组件以及为什么逻辑要回归服务器53
- [使用 Strapi 和 Next.js 构建自定义 Headless CMS54