NextLab
首页01 渲染模型02 路由03 RSC04 缓存05 Server Actions06 性能07 登录状态

CHAPTER 05

Server Actions

'use server' 原理、与 API Route 的区别、渐进增强、useActionState、与缓存联动。核心问题:一个能被客户端直接调用的服务端函数,到底解决了什么。

form 的 action(渐进增强)

<form action={serverAction}>:没有 JS 也能提交,表单数据进服务端函数。

看什么:提交表单后数据被服务端处理并回显;关掉 JS 仍可提交。

useActionState 管理状态

useActionState 处理提交中 loading、返回值、表单状态。

看什么:点提交后看到 pending 状态、服务端返回的错误/成功信息。

事件处理器调用

在 onClick 等事件里直接 await 一个 Server Action。

看什么:点按钮触发服务端函数,看到返回值;与 API Route 的 fetch 对比。

Server Action vs API Route

同样一个'提交',一边用 Server Action,一边用 route.ts + fetch。

看什么:对比两者的写法、请求来源、以及谁帮你刷新了 UI。

Action 里 revalidatePath

Server Action 里调用 revalidatePath,联动第 4 章的数据缓存。

看什么:提交后立刻看到数据更新(数据缓存 + 路由缓存被清)。