Server Actions 完全指南

什么是 Server Actions

Server Actions 是 Next.js 提供的一种在服务端执行函数的方式。你可以在 Server Component 或 Client Component 中定义异步函数，并使用 `"use server"` 指令标记它们。这些函数在服务器上执行，但可以通过表单提交或程序化调用来触发。

基本用法

在 Server Component 中定义一个 Server Action：

export default function NewPostForm() {
  async function createPost(formData: FormData) {
    "use server"
    const title = formData.get("title")
    // 写入数据库...

return ( <form action={createPost}> <input name="title" /> <button type="submit">发布</button> </form> ) } ```

独立的 Actions 文件

对于需要跨组件复用的 Actions，可以创建独立的文件：

// app/actions.ts

import { revalidatePath } from "next/cache"

export async function createPost(formData: FormData) { const title = formData.get("title") // 写入数据库... revalidatePath("/blog") } ```

错误处理

Server Actions 支持通过返回值或抛出异常来处理错误。推荐使用结构化的返回类型：

export async function submitForm(formData: FormData) { try { // 处理逻辑... return { success: true, message: "提交成功" } } catch (error) { return { success: false, message: "提交失败，请重试" } } } ```

乐观更新

配合 `useOptimistic` 钩子，可以在提交数据时立即更新 UI，而无需等待服务器响应。如果服务器操作失败，UI 会自动回滚到之前的状态。这为应用带来了原生应用般的即时响应体验。

最佳实践

- 保持 Server Action 专注于单一职责 - 始终进行输入验证，不要信任客户端数据 - 使用 `revalidatePath` 或 `revalidateTag` 来刷新缓存 - 在处理敏感操作时配合身份验证中间件使用