NextJS中Server Actions与Route Handler配合的技术疑问

我开发的Web应用需要向移动端暴露GET、POST、PUT、DELETE类型的API端点，此前在客户端组件和服务端组件中均使用fetch实现请求。为减少客户端JavaScript代码量，我将客户端组件中的请求改为通过Server Actions在服务端执行，且已成功运行，但存在两处疑问：

1. 我的路由处理器（Route Handler）使用PUT方法，而Server Actions默认使用POST方法，这是否意味着路由端点会丢失原有HTTP方法，统一变为POST？
2. Server Actions在服务端执行，为何能使用原本仅浏览器支持的fetch？

客户端组件代码 #

const handleEdit = async () => {
  if (validateRow(editingRow)) {
    try {
      const updatedItem = await editRow(
        locale,
        apiEndpoint,
        editingId,
        editingRow
      ); // 使用Server Action
      setData(
        data.map((item) =>
          item.id === editingId ? { ...item, ...updatedItem } : item
        )
      );
      cancelEditing();
    } catch (error) {
      console.error("Error updating item:", error);
    }
  }
};

Server Action代码 #

"use server";

export async function editRow(locale, apiEndpoint, id, updatedRow) {
  try {
    const response = await fetch(
      `http://localhost:3000/${locale}/${apiEndpoint}/api/${id}`,
      {
        method: "PUT",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify(updatedRow),
      }
    );

    if (response.ok) {
      return await response.json();
    } else {
      throw new Error("Failed to update item");
    }
  } catch (error) {
    console.error("Error updating item:", error);
    throw error;
  }
}

API路由处理器代码（api/route.js） #

export async function PUT(request, { params }) {
  const t = await getTranslations("HomePage");
  const { package_name, package_description, package_price } =
    await request.json();
  const { id } = await params;
  if (!id || !package_name || !package_price || !package_description) {
    return Response.json(
      { message: "Missing required fields" },
      { status: 400 }
    );
  }

  try {
    await db(
      "UPDATE packages SET package_name = ?, package_description = ?, package_price = ? WHERE id = ?",
      [package_name, package_description, package_price, id]
    );

    return Response.json(
      { message: "Package updated successfully" },
      { status: 200 }
    );
  } catch (error) {
    return Response.json({ message: t("somethingWrong") }, { status: 500 });
  }
}

疑问解答 #

1. 路由端点不会丢失原有HTTP方法 #

这里要分清两个独立的请求链路：

• 前端浏览器调用Server Action时，确实是发POST请求到Next.js的内置Action端点（比如/_next/actions/xxx），这是Server Action的默认调用规则。
• 但你的Server Action内部会主动发起PUT请求到你定义的API路由（http://localhost:3000/.../api/${id}），这个请求的方法是PUT，完全匹配你路由处理器的PUT方法。

你的API路由端点依然保留PUT方法，移动端可以直接调用该端点使用PUT，不受Server Action调用方式的影响。Server Action只是作为前端到API路由的中间层，它的调用方式和API路由对外暴露的HTTP方法无关。

2. 服务端可以用fetch是因为环境支持 #

fetch并非浏览器专属：

• Node.js 18及以上版本已经原生支持fetch API，和浏览器实现一致；
• 如果你用的是更低版本的Node.js，Next.js会自动提供fetch的polyfill，确保服务端环境可以直接使用。

所以在Server Action这种服务端执行的代码里，能直接用fetch完全是环境层面的支持，和浏览器无关。

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