如何选择 Next.js 中的 Server Actions 和 Router Handlers？搞懂这两者的适用场景

当下的 Web 开发可谓进入了「高效时代」，越来越多的框架和工具让我们在处理服务器端逻辑时变得更轻松。而 Next.js 的 Server Actions 和 Router Handlers 更是让很多开发者在项目中轻松处理数据交互。那么问题来了：什么时候用 Server Actions，什么时候用 Router Handlers 呢？这篇文章就来聊聊两者的区别，以及它们的适用场景，希望能帮你在开发中少走弯路。

一、Server Actions 是什么？

Server Actions 是 Next.js 的一种新特性，允许你在 React 组件中直接定义服务器端逻辑。例如，以往我们想从数据库获取数据，可能会写一个 API 路由，然后在组件里通过 fetch 请求拿数据。而有了 Server Actions 后，这一过程就可以简化为一个“在组件内直接定义的函数调用”。你可以把 Server Actions 想象成一个“潜入组件内部的服务器端代码”，直接在服务器端执行，而不需要走 HTTP 请求的那一套流程。

Server Actions 的主要特点：

• • 简化结构：Server Actions 把组件和服务器逻辑整合在一起，不再需要额外创建 API 文件。这种做法减少了代码的分散性，提高了项目的可读性。

• • 减少网络请求：既然直接在服务器上操作数据，自然少了不少网络请求，提升了性能。

• • 安全性更高：Server Actions 的操作都是在服务器端完成的，敏感数据不会暴露在客户端，安全性也随之提升。

但 Server Actions 也有一些局限性，比如复用性不佳，适合单个组件的服务器逻辑，却不太适合跨组件的复用。另外，它依赖服务器环境，测试起来较复杂，因为你无法在本地模拟出相同的服务器端行为。

示例代码

下面我们来看看一个简单的 Server Actions 的例子：

// 在组件中定义一个 Server Action
"use server";
async function fetchData() {
  const response = await fetch("https://api.example.com/data");
  const data = await response.json();
  return data;
}

export default function MyComponent() {
  const data = fetchData(); // 直接调用 Server Action
  return <div>{data}</div>;
}

在这个例子中，fetchData 是一个 Server Action，在组件中直接调用即可，减少了 API 端点的配置步骤。

二、Router Handlers 的作用和适用场景

Router Handlers 是我们常见的 API 端点的定义方式，它可以处理 HTTP 请求，比如 GET、POST 等。这意味着 Router Handlers 更适合用来创建 RESTful API 接口。举个例子，如果你需要一个公开的 API 供多处使用，比如多个组件共享，甚至被其他应用调用，那么 Router Handlers 就会是更合适的选择。

Router Handlers 的优势：

• • 复用性强：Router Handlers 可以脱离组件独立存在，并在多个地方使用。比如，在不同页面调用同一个 API 时，Router Handlers 让接口更加通用。

• • 逻辑与 UI 分离：它将服务器端逻辑与组件的 UI 逻辑分离，便于代码的维护和升级。

示例代码

来看一个简单的 Router Handlers 例子：

// 在 /api/data.js 文件中定义一个 API 端点
export default function handler(req, res) {
  if (req.method === "GET") {
    res.status(200).json({ message: "Hello, World!" });
  } else {
    res.status(405).end();
  }
}

在组件中，我们就可以通过 fetch("/api/data") 访问这个 API，实现了数据获取的功能。Router Handlers 让接口复用性更高，适合跨多个组件调用。

三、Server Actions 和 Router Handlers 的区别总结

Server Actions 和 Router Handlers 各有优缺点，也各有其适用场景。简单来说：

• • Server Actions：适合将服务器端逻辑嵌入组件中使用，减少网络请求，简化代码结构，但复用性较差，适合单组件内使用。

• • Router Handlers：适合需要多个组件调用的情况，特别是构建通用 API 接口时，逻辑和 UI 分离，便于维护。

四、什么时候该选择 Server Actions？

我们可以通过几个场景来看看 Server Actions 的应用：

1. 1. 减少网络请求：如果你的操作很简单，直接在组件内执行，不需要与其他地方共享，那么 Server Actions 可以帮你省去网络请求的步骤，比如获取用户的某些特定信息。

2. 2. 提高安全性：如果涉及敏感信息，比如涉及用户个人数据的获取或处理操作，那么可以选择 Server Actions，确保这些数据只在服务器端处理，不被暴露在客户端。

3. 3. 快速迭代开发：Server Actions 适合小项目或单页面应用（SPA），不需要对接口进行太多复用的情况，能够减少代码结构的复杂度，适合追求开发效率的场景。

五、Router Handlers 的使用场景

Router Handlers 更适合以下几种情况：

1. 1. 构建 RESTful API 接口：需要创建标准的 API 路由，供多个前端组件或客户端调用的情况下，Router Handlers 更合适。

2. 2. 逻辑重用需求：如果有一些逻辑需要在多个地方调用，Router Handlers 可以方便地实现逻辑复用，比如获取热门商品、查询用户订单等接口，可以被多个页面、甚至多个应用访问。

3. 3. 分层架构：当你的应用体量较大，采用前后端分离架构时，Router Handlers 更能适应这种架构，保持接口的独立性。

六、思考：选择适合的工具，事半功倍

归根结底，Server Actions 和 Router Handlers 并非一方替代另一方，而是各司其职。Server Actions 可以让小型应用的服务器逻辑更简洁、高效，而 Router Handlers 则更适合大型应用中的复用和管理需求。

简单总结一下，Server Actions 适合单一组件内、直接调用的服务器逻辑，而Router Handlers 适合构建通用 API 接口和复杂业务逻辑。选择时可以灵活变通，结合实际需求，将两者结合使用，才能让 Next.js 的开发体验更上一层楼。