React 服务器行为：简化服务器端表单处理

React 18 中引入并在 Next.js 中得到显著增强的 React 服务器行为提供了一种革命性的方法，可以直接在服务器上处理表单提交和数据变更。与传统的客户端数据获取和操作相比，此强大功能简化了开发过程、增强了安全性并提高了性能。

什么是 React 服务器行为？

服务器行为是在服务器上运行并可以直接从 React 组件调用的异步函数。它们允许您执行服务器端任务，例如：

表单提交：在服务器上安全地处理表单数据。
数据变更：更新数据库或外部 API。
身份验证：处理用户登录和注册。
服务器端逻辑：执行复杂的业务逻辑，而无需将其暴露给客户端。

服务器行为的关键优势在于，它们使您能够在 React 组件中编写服务器端代码，从而无需单独的 API 路由和复杂的客户端数据获取逻辑。 UI 和服务器端逻辑的这种并置可以实现更易于维护和高效的代码库。

使用 React 服务器行为的好处

使用 React 服务器行为具有以下几个显著优势：

简化开发

服务器行为通过允许您直接在 React 组件中处理表单提交和数据变更来减少样板代码。这消除了对单独的 API 端点和复杂的客户端数据获取逻辑的需求，从而简化了开发过程并使您的代码更易于理解和维护。考虑一个简单的联系表单。如果没有服务器行为，您将需要一个单独的 API 路由来处理表单提交、客户端 JavaScript 来发送数据以及客户端和服务器上的错误处理逻辑。使用服务器行为，所有这些都可以在组件本身中处理。

增强安全性

通过在服务器上运行代码，服务器行为减少了应用程序的攻击面。敏感数据和业务逻辑远离客户端，从而防止恶意用户篡改它们。例如，数据库凭据或 API 密钥永远不会暴露在客户端代码中。所有数据库交互都在服务器上进行，从而降低了 SQL 注入或未经授权的数据访问的风险。

提高性能

服务器行为可以通过减少需要在客户端下载和执行的 JavaScript 代码量来提高性能。这对于低功耗设备或互联网连接速度较慢的用户尤其有利。数据处理发生在服务器上，只有必要的 UI 更新才会发送到客户端，从而加快页面加载速度并带来更流畅的用户体验。

乐观更新

服务器行为与 React 的 Suspense 和 Transitions 无缝集成，从而实现乐观更新。乐观更新允许您立即更新 UI，即使服务器尚未确认该操作。这提供了更具响应性和吸引力的用户体验，因为用户无需等待服务器响应即可看到其操作的结果。在电子商务中，将商品添加到购物车可以立即显示，同时服务器会在后台确认添加。

渐进增强

服务器行为支持渐进增强，这意味着即使 JavaScript 被禁用或无法加载，您的应用程序仍然可以正常运行。当 JavaScript 被禁用时，表单将作为传统的 HTML 表单提交，服务器将处理提交并将用户重定向到新页面。这确保了您的应用程序对所有用户都保持可访问，无论他们的浏览器配置或网络状况如何。这对于可访问性和 SEO 尤其重要。

如何使用 React 服务器行为

要使用 React 服务器行为，您需要使用支持它们的框架，例如 Next.js。这是一个分步指南：

1. 定义服务器行为

创建一个将在服务器上运行的异步函数。此函数应处理您要在服务器上执行的逻辑，例如更新数据库或调用 API。在函数顶部使用 "use server" 指令标记该函数，以指示它是一个服务器行为。此指令告诉 React 编译器将该函数视为服务器端函数，并自动处理客户端和服务器之间的数据序列化和反序列化。

// app/actions.js
'use server'

import { revalidatePath } from 'next/cache';
import { saveMessage } from './db';

export async function createMessage(prevState, formData) {
  const message = formData.get('message');

  try {
    await saveMessage(message);
    revalidatePath('/'); // Clear the route cache
    return { message: 'Message saved successfully!' };
  } catch (e) {
    return { message: 'Failed to save message' };
  }
}

说明：

'use server' 指令将此函数标记为服务器行为。
revalidatePath('/') 清除路由缓存，确保在下次请求时获取更新后的数据。这对于保持数据一致性至关重要。
saveMessage(message) 是您的实际数据库交互逻辑的占位符。它假定您在其他地方定义了一个 saveMessage 函数来处理将消息保存到数据库。
该函数返回一个状态对象，该对象可用于向用户显示反馈。

2. 在您的组件中导入和使用服务器行为

将服务器行为导入到您的 React 组件中，并将其用作表单元素上的 action 属性。 useFormState 钩子可用于管理表单的状态并向用户显示反馈。

// app/page.jsx
'use client';

import { useFormState } from 'react-dom';
import { createMessage } from './actions';

export default function Home() {
  const [state, formAction] = useFormState(createMessage, {message: ''});

  return (
    
      Message:
      
      
      {state?.message && {state.message}}
    
  );
}

说明：

'use client' 指令指定这是一个客户端组件（因为它正在使用 useFormState）。
useFormState(createMessage, {message: ''}) 使用 createMessage 服务器行为初始化表单状态。第二个参数是初始状态。
form 元素的 action 属性设置为 useFormState 返回的 formAction。
state 变量包含来自服务器行为的返回值，该返回值可用于向用户显示反馈。

3. 处理表单数据

在服务器行为内部，您可以使用 FormData API 访问表单数据。此 API 提供了一种访问表单字段值的便捷方法。

'use server'

export async function createMessage(prevState, formData) {
  const message = formData.get('message');

  // ...
}

4. 处理错误

使用 try...catch 块来处理在执行服务器行为期间可能发生的错误。在状态对象中返回一条错误消息以将其显示给用户。

'use server'

export async function createMessage(prevState, formData) {
  const message = formData.get('message');

  try {
    // ...
  } catch (e) {
    return { message: 'Failed to save message' };
  }
}

5. 重新验证数据

在服务器行为成功更改数据后，您可能需要重新验证数据缓存，以确保 UI 反映最新的更改。使用 next/cache 中的 revalidatePath 或 revalidateTag 函数来重新验证特定路径或标记。

'use server'

import { revalidatePath } from 'next/cache';

export async function createMessage(prevState, formData) {
  // ...
  revalidatePath('/'); // Clear the route cache
  // ...
}

高级用法

变更数据

服务器行为特别适合于变更数据，例如更新数据库或外部 API。您可以使用服务器行为来处理需要服务器端逻辑的复杂数据变更，例如验证数据、执行计算或与多个数据源交互。考虑这样一种情况：您需要更新用户的个人资料并发送一封确认电子邮件。服务器行为可以在单个原子操作中处理数据库更新和电子邮件发送过程。

身份验证和授权

服务器行为可用于处理身份验证和授权。通过在服务器上执行身份验证和授权检查，您可以确保只有经过授权的用户才能访问敏感数据和功能。您可以使用服务器行为来处理用户登录、注册和密码重置。例如，服务器行为可以根据数据库验证用户凭据并返回一个可用于验证后续请求的令牌。

边缘函数

服务器行为可以部署为边缘函数，这些函数在全球服务器网络上运行，靠近您的用户。这可以显着减少延迟并提高性能，尤其是对于地理位置分散的用户。边缘函数非常适合处理需要低延迟的服务器行为，例如实时数据更新或个性化内容传递。 Next.js 提供对将服务器行为部署为边缘函数的内置支持。

流式传输

服务器行为支持流式传输，这允许您在数据可用时以块的形式将数据发送到客户端。这可以提高应用程序的感知性能，尤其是对于需要很长时间才能执行的服务器行为。流式传输对于处理大型数据集或复杂计算特别有用。例如，您可以将搜索结果从数据库检索到客户端时对其进行流式传输，从而提供更具响应性的用户体验。

最佳实践

以下是使用 React 服务器行为时应遵循的一些最佳实践：

保持服务器行为小巧且专注：每个服务器行为都应执行一个定义明确的单一任务。这使您的代码更易于理解、测试和维护。
使用描述性名称：选择清楚地指示服务器行为目的的名称。例如，createComment 或 updateUserProfile 比像 processData 这样的通用名称更好。
在服务器上验证数据：始终在服务器上验证数据，以防止恶意用户将无效数据注入您的应用程序。这包括验证数据类型、格式和范围。
妥善处理错误：使用 try...catch 块来处理错误并向用户提供信息丰富的错误消息。避免向客户端暴露敏感错误信息。
使用乐观更新：通过立即更新 UI 来提供更具响应性的用户体验，即使服务器尚未确认该操作。
根据需要重新验证数据：通过在服务器行为更改数据后重新验证数据缓存来确保 UI 反映最新的更改。

真实世界示例

让我们考虑一些如何在不同类型的应用程序中使用 React 服务器行为的真实世界示例：

电子商务应用程序

将商品添加到购物车：服务器行为可以处理将商品添加到用户的购物车并将购物车总额更新到数据库中。乐观更新可用于立即在购物车中显示该商品。
处理付款：服务器行为可以使用第三方付款网关处理付款。服务器行为还可以更新数据库中的订单状态并向用户发送确认电子邮件。
提交产品评论：服务器行为可以处理提交产品评论并将其保存到数据库中。服务器行为还可以计算产品的平均评分并更新产品详细信息页面。

社交媒体应用程序

发布新推文：服务器行为可以处理发布新推文并将其保存到数据库中。服务器行为还可以更新用户的时间线并通知他们的关注者。
点赞帖子：服务器行为可以处理点赞帖子并将点赞数更新到数据库中。乐观更新可用于立即显示更新后的点赞数。
关注用户：服务器行为可以处理关注用户并将关注者和关注数更新到数据库中。

内容管理系统 (CMS)

创建新博文：服务器行为可以处理创建新博文并将其保存到数据库中。服务器行为还可以为帖子生成 slug 并更新站点地图。
更新页面：服务器行为可以处理更新页面并将其保存到数据库中。服务器行为还可以重新验证页面缓存，以确保将更新后的内容显示给用户。
发布更改：服务器行为可以处理发布对数据库的更改并通知所有订阅者。

国际化考虑因素

在为全球受众开发应用程序时，必须考虑国际化 (i18n) 和本地化 (l10n)。以下是在国际化应用程序中使用 React 服务器行为的一些考虑因素：

处理不同的日期和时间格式：使用 Intl API 根据用户的区域设置格式化日期和时间。
处理不同的数字格式：使用 Intl API 根据用户的区域设置格式化数字。
处理不同的货币：使用 Intl API 根据用户的区域设置格式化货币。
翻译错误消息：将错误消息翻译成用户的语言。
支持从右到左 (RTL) 的语言：确保您的应用程序支持 RTL 语言，例如阿拉伯语和希伯来语。

例如，当处理需要日期输入的表单时，服务器行为可以使用 Intl.DateTimeFormat API 根据用户的区域设置解析日期，从而确保无论用户的区域设置如何，都能正确解释日期。

结论

React 服务器行为是一个强大的工具，可用于简化 React 应用程序中的服务器端表单处理和数据变更。通过允许您直接在 React 组件中编写服务器端代码，服务器行为减少了样板代码、增强了安全性、提高了性能并实现了乐观更新。通过遵循本指南中概述的最佳实践，您可以利用服务器行为来构建更强大、可扩展和可维护的 React 应用程序。随着 React 的不断发展，服务器行为无疑将在 Web 开发的未来中发挥越来越重要的作用。