Next.js 13中能否从服务器操作向客户端返回响应？正确实现方式？

你在Server Actions里使用res.send()是不可行的，因为Server Actions并非API路由，它的执行上下文里不存在res（HTTP响应对象），这种写法会直接抛出res is not defined的错误。

正确实现方式 #

Server Actions本质是异步函数，你可以通过直接返回数据或抛出错误来向客户端传递结果，客户端调用时通过try/catch处理成功和失败场景。

修改后的Server Action代码

import { connectDB } from "@utils/database"
import { User } from "@models/user"

export const createFoo = async (foo) => {
  try {
    await connectDB();
    await User.create(foo);
    // 直接返回成功结果
    return { title: "OK" };
  } catch (err) {
    // 方式1：抛出错误，让客户端捕获
    throw new Error(`创建失败: ${err.message}`);
    // 方式2：返回错误对象（若不想抛出异常）
    // return { title: "Error", message: err.message };
  }
}

客户端调用示例（React组件中）

"use client";

import { createFoo } from "@/app/actions/create-foo-action";

export default function CreateFooForm() {
  const handleSubmit = async (e) => {
    e.preventDefault();
    const fooData = Object.fromEntries(new FormData(e.target));

    try {
      const result = await createFoo(fooData);
      // 处理成功逻辑，比如提示用户
      alert(result.title);
    } catch (error) {
      // 处理错误逻辑
      console.error(error.message);
      alert(error.message);
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" name="name" placeholder="输入名称" required />
      <button type="submit">创建Foo</button>
    </form>
  );
}

两种返回方式的区别 #

• 抛出错误：适合需要中断流程、触发客户端错误处理的场景，Next.js会自动序列化错误信息，客户端能直接捕获到错误对象。
• 返回错误对象：适合需要在客户端判断返回状态的场景，不会触发catch块，需手动检查返回值中的状态标识。

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