React服务器动作Skill react-server-actions

React服务器动作是一种在Next.js 14+中用于处理表单和服务器端操作的技能,允许开发者在服务器端安全执行代码,无需传统API路由,支持渐进增强和优化用户体验。关键词:Next.js, React, 服务器动作, 表单处理, 服务器端突变, 渐进增强, 乐观UI更新, SEO搜索。

前端开发 0 次安装 0 次浏览 更新于 3/18/2026

name: react-server-actions description: 在Next.js 14+中实现React服务器动作,用于安全、渐进增强的表单处理和服务器端突变,无需API路由。使用场景包括处理表单提交、执行服务器端突变、实现渐进增强、创建无需客户端JavaScript的动作、在服务器上安全验证数据、突变后重新验证缓存数据、服务器端处理文件上传、实现乐观UI更新,或构建在无客户端JavaScript时优雅降级的表单。

React服务器动作 - 表单处理

何时使用此技能

  • 在Next.js 14+应用中处理表单提交
  • 执行无需API路由的服务器端数据突变
  • 为表单实现渐进增强
  • 创建无需客户端JavaScript的动作
  • 在服务器上安全验证表单数据
  • 在数据突变后重新验证Next.js缓存
  • 使用服务器端处理处理文件上传
  • 使用useOptimistic实现乐观UI更新
  • 构建以服务器为先架构的可访问表单
  • 直接集成数据库操作
  • 使用useFormState钩子管理表单状态
  • 创建仅服务器代码的安全突变

何时使用此技能

  • 在Next.js App Router中实现表单和突变。
  • 当处理相关任务或功能时
  • 在需要此专业知识的开发过程中

使用时机:在Next.js App Router中实现表单和突变。

服务器动作

'use server';

export async function createPost(formData: FormData) {
  const title = formData.get('title');
  await db.post.create({ data: { title } });
  revalidatePath('/posts');
}

资源