ArchitecturePersonal Project (个人项目)

React Server Actions

Project: Expense Tracker
简历背景

"Expense Tracker: 深度实践 Next.js 16 Server Actions..."

面试题

Server Actions 和传统的 API Route 有什么区别?它是怎么实现的?

Server Actions 允许在组件内部直接调用异步函数操作数据库。它像 RPC (远程过程调用)。不需要手动创建 /api/xxx 接口。它最大的优势是配合 useFormState 做渐进式增强,且能自动处理 Cache Revalidation。
**原理:** 1. **编译时:** Next.js 编译器看到 `"use server"`,会把这个函数提取出来,生成一个唯一的 Action ID (哈希值)。 2. **运行时:** 客户端调用这个函数时,实际上是发了一个 `POST` 请求到当前页面 URL。 Header 中带了一个 `Next-Action: [Action ID]`。 Payload 就是函数的参数序列化结果。 3. **优势:** - **Type Safety:** 前后端代码在一起,类型自动推导完整。 - **Closure:** 它可以闭包引用服务端的变量 (虽然要小心序列化)。 - **Revalidation:** `revalidatePath` 可以直接清除页面缓存,无需手动通知前端 `mutate`。