Next-Safe-Action 项目中关于表单渐进增强的技术解析

表单渐进增强的实现原理

在 Next.js 应用中实现表单提交时，开发者常常面临一个关键问题：如何在禁用 JavaScript 的情况下仍然保持表单功能正常。这就是所谓的"渐进增强"(Progressive Enhancement)技术。

问题本质分析

Next-Safe-Action 库提供了两种主要的方式来处理表单提交：

1. useAction 钩子方式：这是基于 JavaScript 的实现，依赖于客户端交互
2. 直接使用 Server Action：这是原生 HTML 表单的工作方式，不依赖 JavaScript

当开发者使用 useAction 钩子时，表单提交完全依赖于 JavaScript 运行。这是因为钩子本身就是 JavaScript 函数，在禁用 JS 的环境下自然无法工作。

正确的渐进增强实现方案

要实现真正的渐进增强，开发者应该采用以下两种方式之一：

方案一：直接使用 Server Action

将 Server Action 直接传递给表单的 action 属性，这是最原生的实现方式：

<form action={serverAction}>
  <input name="username" />
  <button type="submit">提交</button>
</form>

方案二：使用 React 的 useActionState 钩子

React 18+ 提供了 useActionState 钩子，这是官方推荐的实现渐进增强的方式：

import { useActionState } from "react";

function FormComponent() {
  const [state, submitAction, isPending] = useActionState(
    serverAction,
    initialState
  );

  return (
    <form action={submitAction}>
      <input name="username" />
      <button type="submit" disabled={isPending}>
        提交
      </button>
    </form>
  );
}

技术权衡与选择建议

在实际开发中，开发者需要根据项目需求做出技术选择：

1. 追求完整用户体验：使用 Next-Safe-Action 的 useStateAction 钩子，可以获得更丰富的状态管理(isPending、data、error等)，但会失去渐进增强能力

2. 需要渐进增强：使用 React 原生 useActionState，表单能在无JS环境下工作，但会失去一些便捷的状态管理功能

3. 混合方案：可以考虑在关键表单使用 useActionState 保证基本功能，在次要表单使用 useStateAction 获得更好体验

实现示例

以下是一个完整的支持渐进增强的实现示例：

// 服务端 Action 定义
const formAction = createSafeActionClient()
  .schema(z.object({ username: z.string() }))
  .stateAction(async ({ parsedInput }) => {
    return `欢迎, ${parsedInput.username}`;
  });

// 客户端组件
function ProgressiveForm() {
  const [state, submitAction, isPending] = useActionState(
    formAction,
    { data: null, error: null }
  );

  return (
    <div>
      <form action={submitAction}>
        <input name="username" />
        <button type="submit" disabled={isPending}>
          提交
        </button>
      </form>
      {state.data && <p>{state.data}</p>}
      {state.error && <p>错误: {state.error}</p>}
    </div>
  );
}

总结

Next-Safe-Action 项目为开发者提供了灵活的表单处理方案。理解渐进增强的实现原理和不同方案的优缺点，可以帮助开发者根据项目需求做出合理的技术选型。对于关键业务表单，建议优先考虑渐进增强实现；对于增强型交互，则可以使用更丰富的钩子功能。