照片由 Juanjo Jaramillo 授权发布于 Unsplash

在不断演变的 web 开发领域中，Next.js 已经确立了其作为构建具备服务器端渲染、静态站点生成和动态路由的 React 应用程序的坚实框架的地位。Next.js 处理服务器端逻辑的两个重要特性是 API 路由和服务器端操作。二者各有其应用场景、优势与权衡。本文将深入探讨每一特性的细节，提供何时使用它们的指南，并通过代码示例来展示它们的使用。

API 路由功能在 Next.js 中允许你直接在应用内创建 API 接口。此功能特别适合处理后端任务，比如获取数据、提交表单等，而无需单独搭建服务器。

好：

• 轻松设置：在 pages/api 目录中快速创建 API 接口。
• 无服务器函数：每个 API 路由都作为无服务器函数部署，可以自动扩展规模。
• 与 Next.js 路由系统无缝集成：轻松集成到 Next.js 路由系统。

缺点：

• 冷启动延时：无服务器函数可能会有冷启动延时，特别是在一段时间没有请求之后的第一次请求时尤为显著。
• 有限的运行时间：函数有一个最大运行时间，这可能对长时间运行的任务有所限制。

例子:

    JavaScript

复制一下这段代码吧

    // pages/api/hello.js

注：此文件路径指向一个API接口文件，用于处理特定的请求和响应。

    export default function handler(req, res) {  
      if (req.method === 'GET') {  
        res.status(200).json({ message: 'Hello, world!' });  
      } else {  
        res.status(405).json({ message: '不允许此方法' });  
      }  
    }

例如，对 /api/hello 的一个 GET 请求将返回一个带有问候信息的 JSON 响应。

服务器操作是 Next.js 中的一项新实验性功能，允许您直接在 React 组件内定义服务器端逻辑。这种做法可以通过将服务器端逻辑保持在需要它的组件附近来简化代码，这将使代码更加简洁。

改为：

改为更简洁的：

• 逻辑共置：服务器端逻辑在组件内部定义，使代码更紧密且更易于管理。
• 简化的数据获取：可以直接在组件内部获取和操作数据，而不需要设置一个单独的API路由。
• 更好的性能：消除了额外的HTTP请求，从而可能减少延迟。

• 实验性功能：作为实验性功能，可能不够稳定，并且在未来的版本中可能会有所变化。

• 有限的使用场景：不适合所有类型的服务器端逻辑，特别是复杂或长时间运行的任务。

例子：

    JavaScript

复制一下代码

// app/页面.js
import { useEffect, useState } from 'react';

    export default function HomePage() {  
      const [data, setData] = useState(null);  useEffect(() => {  
        async function fetchData() {  
          const res = await fetchDataFromServer();  
          setData(res);  
        }    fetchData();  
      }, []);  async function fetchDataFromServer() {  
        // 服务器端逻辑示例  
        const response = await fetch('https://api.example.com/data');  // 从服务器获取数据的示例URL  
        const result = await response.json();  
        return result;  
      }  return (  
        <div>  
          {data ? <div>数据: {data.message}</div> : <div>正在加载...</div>}  
        </div>  
      );  
    }

在这个例子中，fetchDataFromServer 是在组件中定义的一个函数，从外部API获取数据并将获取的数据用于更新组件的状态。

注：此处翻译应直接为“何时使用API路由”或更口语化为“何时用API路由”，以符合中文习惯。根据要求，不包含额外解释，直接翻译如下：

API 路由在以下情况下理想：
例如：

包括但不限于：处理特定于应用的逻辑，如身份验证、数据处理和业务逻辑。

• 你需要为你的应用程序创建RESTful端点。
• 处理与你的React组件无关的复杂服务器端逻辑。
• 需要明确地将前后端逻辑分开。

示例用法：

• 用户认证端点（例如，登录和用户注册）。
• 资源的 CRUD 操作（例如，产品、文章）。
• Webhook（网络钩子）和与其他平台的集成。

当服务器操作最理想的时候，通常是：

• 你希望把服务器端的逻辑和使用它的组件放得更近。
• 处理直接影响组件的服务器端部分的逻辑。
• 通过减少单独的API请求来优化性能。

示例用例包括

• 获取页面的初始数据。
• 简单的服务器端计算和数据转换。
• 与组件状态和生命周期紧密关联的操作。

无论是 Next.js API 路由还是服务器动作都提供了独特的优势，并适用于不同的场景。API 路由提供了一种稳健的方式来定义无服务器端点并分离后端逻辑，而服务器动作则将服务器端逻辑更贴近组件，简化代码库并提升性能。

选择合适的方法取决于您的具体需求和项目条件。API 路由通常作为结构清晰、可扩展的后端操作的首选。服务器动作可以为更简单、组件特定的服务器端逻辑提供更集成和高效的解决方案。

关注 Next.js 的文档和社区，了解这些功能的最新动态，随着框架的不断演进和完善，持续改进和发展。

你在使用 Next.js 的 API Routes 或 Server Actions 时有什么经验吗？下面留言分享你的看法吧！