在Next.js 13中，是否可以从服务器操作向客户端发送响应？

nom7f22z 于 2023-11-18 发布在其他

关注(0)|答案(2)|浏览(103)

我正在开发一个Next.js应用程序，我在app/actions/create-foo-action.js下定义了一个动作。我试图从这个服务器动作向客户端发送一个响应。

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

export const createFoo = async (foo) => {
  try {
    await connectDB();
    await User.create(foo);
    res.send({title: "OK"}); // Is this possible?
  } catch (err) {
    res.send({title: "Error"}); // Is this possible?
  }
}

字符串
我不确定这是否是在Next.js中正确的方法。是否有可能从服务器操作中向客户端发送响应？如果没有，实现这一点的正确方法是什么？

next.js

来源：https://stackoverflow.com/questions/76846735/is-it-possible-to-send-a-response-back-to-the-client-from-server-actions-in-next

2条答案

按热度按时间

ukdjmx9f1#

你不能从服务器动作本身返回响应，但你可以从它返回一个值。请注意，服务器动作现在是Next.js中的一个稳定功能，可以在生产中使用，使用API端点也是一个有效的选择。

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

export async function myAction(foo) {
  "use server"; // mark function as server action
  try {
    await connectDB();
    await User.create(foo);
    return { title: "OK" };
  } catch (err) {
    return { title: "Error" };
  }
}

字符串
在客户端组件中，您可以简单地调用函数并等待服务器操作的结果，如下面的示例所示：

"use client";

import { useCallback } from "react";
import { myAction } "from/where-ever";

const MyComponent = () => {
  const onClick = useCallback(async () => {
    const { title } = await myAction({ name: "John Doe" });
    console.log(title);
  }, []);

  return <button onClick={onClick}>Create John Doe</button>;
};

型
您可以在official documentation中找到更多关于服务器操作的信息。如果您想将API与客户端获取结合使用，请参阅some resources to get you started。

赞(0）回复(0）举报 2023-11-18

mpgws1up2#

你应该使用useFormState。你可以在React文档和Next.js文档中找到例子：