React 服务器操作响应流：渐进式表单响应以增强用户体验

React 服务器操作 (Server Actions) 为我们在 React 应用中处理服务器端操作的方式带来了强大的范式转变。其中最令人兴奋的功能之一是能够渐进式地流式传输响应，这使我们即使在整个操作完成之前也能向用户提供即时反馈。这对于表单尤其有益，我们可以通过在数据可用时更新 UI 来创建更具响应性和吸引力的用户体验。

理解 React 服务器操作

服务器操作是在服务器上运行的异步函数，由 React 组件发起。与传统的 API 调用相比，它们具有几个优势：

• 提高安全性： 服务器操作直接在服务器上运行，降低了向客户端暴露敏感数据或逻辑的风险。
• 减少样板代码： 它们无需在客户端编写单独的 API 路由和数据获取逻辑。
• 增强性能： 它们可以利用服务器端渲染 (SSR) 和缓存来加快初始加载时间并提高性能。
• 类型安全： 配合 TypeScript，服务器操作提供端到端的类型安全，确保客户端和服务器之间的数据一致性。

响应流的强大功能

传统的表单提交通常涉及将所有数据发送到服务器，等待响应，然后相应地更新 UI。这可能会导致可感知的延迟，特别是对于复杂的表单或缓慢的网络连接。响应流允许服务器将数据分块发送回客户端，使我们能够在数据可用时渐进式地更新 UI。

想象一个根据用户输入计算复杂价格的表单。服务器可以不必等待整个计算完成，而是将中间结果流式传输回客户端，为用户提供实时反馈。这可以显著改善用户体验，并使应用程序感觉响应更迅速。

使用服务器操作实现渐进式表单响应

让我们通过一个示例来演示如何使用 React 服务器操作实现渐进式表单响应。

示例：实时货币转换器

我们将创建一个简单的货币转换器表单，在用户输入金额时提供实时的汇率更新。

1. 设置服务器操作

首先，我们定义处理货币转换的服务器操作。

// server/actions.ts
'use server';

import { unstable_cache } from 'next/cache';

async function getExchangeRate(fromCurrency: string, toCurrency: string): Promise<number> {
  // 模拟从外部 API 获取汇率
  console.log(`Fetching exchange rate for ${fromCurrency} to ${toCurrency}`);
  await new Promise(resolve => setTimeout(resolve, 500)); // 模拟网络延迟
  if (fromCurrency === 'USD' && toCurrency === 'EUR') return 0.92;
  if (fromCurrency === 'EUR' && toCurrency === 'USD') return 1.09;
  if (fromCurrency === 'USD' && toCurrency === 'JPY') return 145;
  if (fromCurrency === 'JPY' && toCurrency === 'USD') return 0.0069;
  throw new Error(`Exchange rate not found for ${fromCurrency} to ${toCurrency}`);
}

export const convertCurrency = async (prevState: any, formData: FormData) => {
  const fromCurrency = formData.get('fromCurrency') as string;
  const toCurrency = formData.get('toCurrency') as string;
  const amount = Number(formData.get('amount'));

  try {
    if (!fromCurrency || !toCurrency || isNaN(amount)) {
      return { message: 'Please provide valid input.' };
    }

    // 模拟流式响应
    await new Promise(resolve => setTimeout(resolve, 250));
    const exchangeRate = await unstable_cache(
      async () => getExchangeRate(fromCurrency, toCurrency),
      [`exchange-rate-${fromCurrency}-${toCurrency}`],
      { tags: [`exchange-rate-${fromCurrency}-${toCurrency}`] }
    )();

    await new Promise(resolve => setTimeout(resolve, 250));
    const convertedAmount = amount * exchangeRate;

    return { message: `Converted amount: ${convertedAmount.toFixed(2)} ${toCurrency}` };
  } catch (e: any) {
    console.error(e);
    return { message: 'Failed to convert currency.' };
  }
};

在此示例中，convertCurrency 服务器操作获取汇率（通过延迟模拟）并计算转换后的金额。我们使用 setTimeout 添加了人为的延迟，以模拟网络延迟并展示流式效果。

2. 实现 React 组件

接下来，我们创建使用该服务器操作的 React 组件。

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

import { useState, useTransition } from 'react';
import { convertCurrency } from './server/actions';
import { useFormState } from 'react-dom';

export default function CurrencyConverter() {
  const [fromCurrency, setFromCurrency] = useState('USD');
  const [toCurrency, setToCurrency] = useState('EUR');
  const [amount, setAmount] = useState('');
  const [isPending, startTransition] = useTransition();
  const [state, formAction] = useFormState(convertCurrency, { message: '' });

  const handleSubmit = async (event: React.FormEvent) => {
    event.preventDefault();
    startTransition(() => {
      formAction(new FormData(event.target as HTMLFormElement));
    });
  };

  return (
    <div>
      <h2>Real-Time Currency Converter</h2>
      <form action={handleSubmit}>
        <label htmlFor="fromCurrency">From:</label>
        <select id="fromCurrency" name="fromCurrency" value={fromCurrency} onChange={(e) => setFromCurrency(e.target.value)}>
          <option value="USD">USD</option>
          <option value="EUR">EUR</option>
          <option value="JPY">JPY</option>
        </select>

        <label htmlFor="toCurrency">To:</label>
        <select id="toCurrency" name="toCurrency" value={toCurrency} onChange={(e) => setToCurrency(e.target.value)}>
          <option value="EUR">EUR</option>
          <option value="USD">USD</option>
          <option value="JPY">JPY</option>
        </select>

        <label htmlFor="amount">Amount:</label>
        <input
          type="number"
          id="amount"
          name="amount"
          value={amount}
          onChange={(e) => setAmount(e.target.value)}
        />

        <button type="submit" disabled={isPending}>
          {isPending ? 'Converting...' : 'Convert'}
        </button>
      </form>
      <p>{state.message}</p>
    </div>
  );
}

关键点：

• 我们使用 useFormState 钩子来管理表单状态并调用服务器操作。
• 来自 useTransition 的 isPending 状态会在操作运行时禁用提交按钮并显示“转换中...”消息，为用户提供反馈。
• useFormState 返回的 formAction 函数会自动处理表单提交，并用服务器操作的响应更新状态。

3. 理解渐进式更新

当用户提交表单时，handleSubmit 函数被调用。它会从表单创建一个 FormData 对象，并将其传递给 formAction 函数。然后，服务器操作在服务器上执行。由于我们在服务器操作中引入了人为的延迟，您将观察到以下情况：

1. 提交按钮几乎立即变为“转换中...”。
2. 短暂延迟（250毫秒）后，代码模拟获取汇率。
3. 计算出转换后的金额，并将结果发送回客户端。
4. React 组件中的 state.message 被更新，显示转换后的金额。

这演示了响应流如何让我们在数据可用时向用户提供中间更新，从而带来更灵敏、更具吸引力的用户体验。

渐进式表单响应的优势

• 改善用户体验： 为用户提供即时反馈，使应用程序感觉响应更迅速，不那么迟钝。
• 减少感知延迟： 通过显示中间结果，即使用户操作的总时间相同，用户也会感觉过程更快。
• 增强用户参与度： 通过提供实时更新来保持用户的参与度，防止他们因感觉延迟而放弃表单。
• 提高转化率： 更流畅、更具响应性的用户体验可以带来更高的转化率，特别是对于复杂的表单。

高级技巧

1. 使用 `useOptimistic` 实现即时 UI 更新

useOptimistic 钩子允许您在服务器操作完成之前乐观地更新 UI。这可以提供更快的感知响应时间，因为 UI 会立即反映预期的结果。

import { useOptimistic } from 'react';

function MyComponent() {
  const [optimisticState, addOptimistic] = useOptimistic(
    initialState,
    (state, newUpdate) => {
      // 根据更新返回新状态
      return { ...state, ...newUpdate };
    }
  );

  const handleClick = async () => {
    addOptimistic({ someValue: 'optimistic update' });
    await myServerAction();
  };

  return (
    <div>
      <p>{optimisticState.someValue}</p>
      <button onClick={handleClick}>Update</button>
    </div>
  );
}

在货币转换器示例中，您可以根据当前汇率乐观地更新转换后的金额，在服务器上实际计算完成之前为用户提供即时预览。如果服务器返回错误，您可以恢复乐观更新。

2. 实现错误处理和回退机制

实现强大的错误处理和回退机制至关重要，以处理服务器操作失败或网络连接中断的情况。您可以在服务器操作中使用 try...catch 块来捕获错误，并向客户端返回适当的错误消息。

// server/actions.ts

export const convertCurrency = async (prevState: any, formData: FormData) => {
  // ...
  try {
    // ...
  } catch (error: any) {
    console.error(error);
    return { message: 'An error occurred while converting the currency. Please try again later.' };
  }
};

在客户端，您可以向用户显示错误消息，并提供重试操作或联系支持的选项。

3. 缓存汇率以提高性能

从外部 API 获取汇率可能会成为性能瓶颈。为了提高性能，您可以使用像 Redis 或 Memcached 这样的缓存机制来缓存汇率。Next.js 的 unstable_cache（如示例中所用）提供了一个内置的缓存解决方案。请记住定期使缓存失效，以确保汇率是最新的。

4. 国际化注意事项

为全球受众构建应用程序时，考虑国际化（i18n）非常重要。这包括：

• 数字格式化： 为不同地区使用适当的数字格式（例如，使用逗号或句点作为小数分隔符）。
• 货币格式化： 根据用户的地区显示货币符号和格式。
• 日期和时间格式化： 为不同地区使用适当的日期和时间格式。
• 本地化： 将 UI 翻译成不同的语言。

像 Intl 和 react-intl 这样的库可以帮助您在 React 应用程序中实现 i18n。

真实世界的示例和用例

• 电子商务： 在用户将商品添加到购物车时，显示实时的运费和预计送达时间。
• 金融应用： 提供实时的股票报价和投资组合更新。
• 旅游预订： 显示实时的航班价格和可用性。
• 数据可视化： 将数据更新流式传输到图表和图形中。
• 协作工具： 显示文档和项目的实时更新。

结论

React 服务器操作响应流提供了一种强大的方式来增强 React 应用程序的用户体验。通过提供渐进式表单响应，您可以创建更快、更具响应性、更吸引人的表单，从而保持用户参与度并提高转化率。通过将响应流与乐观更新和缓存等技术相结合，您可以构建真正卓越的用户体验。

随着 React 服务器操作的不断发展，我们可以期待更多强大的功能和能力出现，进一步简化复杂和动态 Web 应用程序的开发。

进一步探索

• Next.js 服务器操作文档
• React 官方文档
• Streams API

本指南全面概述了 React 服务器操作响应流及其在渐进式表单响应中的应用。通过理解这里讨论的概念和技术，您可以利用这一强大功能构建更快、更灵敏、更具吸引力的 Web 应用程序。