Next.js App Router中使用useFormStatus时能否服务端取数预填表单？

当然可以用服务端取数来预填表单字段，根本不用局限在客户端请求。给你几个实际能用的方案：

1. 服务器组件查数据，传给客户端表单组件 #

Next.js的服务器组件能直接从数据库拉用户数据，然后把数据当props传给客户端的表单组件（毕竟表单要用到useFormStatus这种客户端API，所以表单本身得是客户端组件）。

举个例子：

// app/edit-user/page.js （服务器组件，不用加'use client'）
import EditUserForm from './EditUserForm';
import { getUserById } from '@/lib/db';

export default async function EditUserPage({ params }) {
  // 服务器端直接查用户数据，完全安全
  const user = await getUserById(params.userId);
  return <EditUserForm initialUser={user} />;
}

// app/edit-user/EditUserForm.js （客户端组件，必须加'use client'）
'use client';
import { useFormStatus } from 'react-dom';
import { useForm } from 'react-hook-form';

export default function EditUserForm({ initialUser }) {
  const { pending } = useFormStatus();
  // 把服务端拿到的数据设为表单默认值
  const { register, handleSubmit } = useForm({
    defaultValues: {
      name: initialUser.name,
      email: initialUser.email,
      password: '' // 密码默认空，让用户自己填
    }
  });

  const onSubmit = handleSubmit(async (data) => {
    // 调用Server Action提交修改
    await updateUser(data);
  });

  return (
    <form action={onSubmit}>
      <input {...register('name')} placeholder="姓名" />
      <input {...register('email')} placeholder="邮箱" />
      <input type="password" {...register('password')} placeholder="新密码" />
      <button type="submit" disabled={pending}>
        {pending ? '保存中...' : '保存修改'}
      </button>
    </form>
  );
}

2. 服务器组件直接渲染初始值，配合客户端提交状态组件 #

要是你不想把整个表单做成客户端组件，也可以让服务器组件直接渲染input的defaultValue，然后单独写个客户端组件来处理提交pending状态：

// app/edit-user/page.js （服务器组件）
import SubmitButton from './SubmitButton';
import { getUserById } from '@/lib/db';
import { updateUserAction } from '@/lib/actions';

export default async function EditUserPage({ params }) {
  const user = await getUserById(params.userId);
  return (
    <form action={updateUserAction}> {/* 直接把Server Action设为form的action */}
      <input type="text" name="name" defaultValue={user.name} required />
      <input type="email" name="email" defaultValue={user.email} required />
      <input type="password" name="password" placeholder="输入新密码（可选）" />
      {/* 用客户端组件处理pending状态 */}
      <SubmitButton />
    </form>
  );
}

// app/edit-user/SubmitButton.js （客户端组件）
'use client';
import { useFormStatus } from 'react-dom';

export default function SubmitButton() {
  const { pending } = useFormStatus();
  return (
    <button type="submit" disabled={pending}>
      {pending ? '正在保存...' : '保存'}
    </button>
  );
}

这种方式里，表单的初始值直接由服务器渲染到页面里，客户端只负责处理提交时的状态，完全不冲突。

关键提醒 #

• 服务器组件里的数据库查询是在服务端跑的，不会泄露给客户端，安全性拉满。
• useFormStatus只需要在客户端的小组件里用就行，和服务端取数预填的逻辑完全不搭嘎，两者可以完美共存。
• 要是用react-hook-form或者其他表单库，直接把服务端拿到的数据传给defaultValues就完事了，非常顺滑。

说白了，没必要死磕客户端取数，服务端取数预填不仅可行，还更安全、性能更好——页面加载时数据就已经在那了，不用等客户端发请求再填充。

内容的提问来源于stack exchange，提问作者ttt