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 章的数据缓存。
看什么:提交后立刻看到数据更新(数据缓存 + 路由缓存被清)。