Потоковая передача ответов React Server Actions: прогрессивный отклик формы для улучшения UX

React Server Actions представляют собой мощный сдвиг парадигмы в обработке серверных операций в наших React-приложениях. Одной из самых захватывающих возможностей является способность передавать ответы в потоковом режиме, что позволяет нам предоставлять пользователям немедленную обратную связь еще до завершения всей операции. Это особенно полезно для форм, где мы можем создать более отзывчивый и привлекательный пользовательский опыт, обновляя интерфейс по мере поступления данных.

Что такое React Server Actions

Server Actions — это асинхронные функции, которые выполняются на сервере и инициируются из React-компонентов. Они предлагают несколько преимуществ по сравнению с традиционными вызовами API:

• Повышенная безопасность: Server Actions выполняются непосредственно на сервере, что снижает риск раскрытия конфиденциальных данных или логики на клиенте.
• Меньше шаблонного кода: Они устраняют необходимость в отдельных маршрутах API и логике получения данных на клиенте.
• Улучшенная производительность: Они могут использовать рендеринг на стороне сервера (SSR) и кэширование для более быстрой начальной загрузки и повышения производительности.
• Типобезопасность: С TypeScript Server Actions обеспечивают сквозную типобезопасность, гарантируя согласованность данных между клиентом и сервером.

Сила потоковой передачи ответов

Традиционная отправка форм часто включает отправку всех данных на сервер, ожидание ответа и последующее обновление интерфейса. Это может привести к ощутимой задержке, особенно для сложных форм или медленных сетевых соединений. Потоковая передача ответов позволяет серверу отправлять данные обратно клиенту по частям, что дает нам возможность постепенно обновлять интерфейс по мере поступления данных.

Представьте себе форму, которая рассчитывает сложную цену на основе ввода пользователя. Вместо того чтобы ждать завершения всего расчета, сервер может передавать промежуточные результаты обратно клиенту, предоставляя пользователю обратную связь в реальном времени. Это может значительно улучшить пользовательский опыт и сделать приложение более отзывчивым.

Реализация прогрессивного отклика формы с помощью Server Actions

Давайте рассмотрим пример реализации прогрессивного отклика формы с помощью React Server Actions.

Пример: Конвертер валют в реальном времени

Мы создадим простую форму конвертера валют, которая предоставляет обновления обменного курса в реальном времени по мере того, как пользователь вводит сумму.

1. Настройка Server Action

Сначала определим Server Action, который будет обрабатывать конвертацию валюты.

// 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: 'Пожалуйста, введите корректные данные.' };
    }

    // Симулируем потоковую передачу ответа
    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: `Сконвертированная сумма: ${convertedAmount.toFixed(2)} ${toCurrency}` };
  } catch (e: any) {
    console.error(e);
    return { message: 'Не удалось сконвертировать валюту.' };
  }
};

В этом примере Server Action convertCurrency получает обменный курс (симулируя задержку) и рассчитывает сконвертированную сумму. Мы добавили искусственные задержки с помощью setTimeout, чтобы симулировать сетевую задержку и продемонстрировать эффект потоковой передачи.

2. Реализация React-компонента

Далее создадим React-компонент, который использует Server Action.

// 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>Конвертер валют в реальном времени</h2>
      <form action={handleSubmit}>
        <label htmlFor="fromCurrency">Из:</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">В:</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">Сумма:</label>
        <input
          type="number"
          id="amount"
          name="amount"
          value={amount}
          onChange={(e) => setAmount(e.target.value)}
        />

        <button type="submit" disabled={isPending}>
          {isPending ? 'Конвертация...' : 'Конвертировать'}
        </button>
      </form>
      <p>{state.message}</p>
    </div>
  );
}

Ключевые моменты:

• Мы используем хук useFormState для управления состоянием формы и вызова Server Action.
• Состояние isPending из useTransition отключает кнопку отправки и показывает сообщение "Конвертация...", пока действие выполняется, предоставляя пользователю обратную связь.
• Функция formAction, возвращаемая useFormState, автоматически обрабатывает отправку формы и обновляет состояние ответом от Server Action.

3. Понимание прогрессивных обновлений

Когда пользователь отправляет форму, вызывается функция handleSubmit. Она создает объект FormData из формы и передает его в функцию formAction. Затем Server Action выполняется на сервере. Из-за искусственных задержек, введенных в Server Action, вы будете наблюдать следующее:

1. Кнопка отправки почти мгновенно меняется на "Конвертация...".
2. После короткой задержки (250 мс) код симулирует получение обменного курса.
3. Рассчитывается сконвертированная сумма, и результат отправляется обратно клиенту.
4. state.message в React-компоненте обновляется, отображая сконвертированную сумму.

Это демонстрирует, как потоковая передача ответов позволяет нам предоставлять пользователю промежуточные обновления по мере поступления данных, что приводит к более отзывчивому и увлекательному пользовательскому опыту.

Преимущества прогрессивного отклика формы

• Улучшенный пользовательский опыт: Обеспечивает немедленную обратную связь пользователям, делая приложение более отзывчивым и менее медлительным.
• Снижение воспринимаемой задержки: Показывая промежуточные результаты, пользователи воспринимают процесс как более быстрый, даже если общая операция занимает то же время.
• Повышенная вовлеченность: Удерживает пользователей, предоставляя обновления в реальном времени и предотвращая их уход с формы из-за воспринимаемых задержек.
• Увеличение конверсии: Более плавный и отзывчивый пользовательский опыт может привести к более высоким показателям конверсии, особенно для сложных форм.

Продвинутые техники

1. Использование `useOptimistic` для немедленных обновлений UI

Хук useOptimistic позволяет оптимистично обновлять UI до завершения Server Action. Это может обеспечить еще более быстрое воспринимаемое время отклика, поскольку UI немедленно отражает ожидаемый результат.

import { useOptimistic } from 'react';

function MyComponent() {
  const [optimisticState, addOptimistic] = useOptimistic(
    initialState,
    (state, newUpdate) => {
      // Возвращаем новое состояние на основе обновления
      return { ...state, ...newUpdate };
    }
  );

  const handleClick = async () => {
    addOptimistic({ someValue: 'оптимистичное обновление' });
    await myServerAction();
  };

  return (
    <div>
      <p>{optimisticState.someValue}</p>
      <button onClick={handleClick}>Обновить</button>
    </div>
  );
}

В примере с конвертером валют вы могли бы оптимистично обновить сконвертированную сумму на основе текущего обменного курса, предоставляя пользователю немедленный предварительный просмотр до того, как фактический расчет завершится на сервере. Если сервер вернет ошибку, вы можете отменить оптимистичное обновление.

2. Реализация обработки ошибок и механизмов отката

Крайне важно реализовать надежную обработку ошибок и механизмы отката для случаев, когда Server Action завершается сбоем или прерывается сетевое соединение. Вы можете использовать блок try...catch внутри Server Action, чтобы перехватывать ошибки и возвращать соответствующее сообщение об ошибке клиенту.

// server/actions.ts

export const convertCurrency = async (prevState: any, formData: FormData) => {
  // ...
  try {
    // ...
  } catch (error: any) {
    console.error(error);
    return { message: 'Произошла ошибка при конвертации валюты. Пожалуйста, попробуйте позже.' };
  }
};

На стороне клиента вы можете отобразить сообщение об ошибке пользователю и предоставить опции для повторной попытки операции или обращения в поддержку.

3. Кэширование обменных курсов для производительности

Получение обменных курсов из внешнего API может стать узким местом в производительности. Чтобы улучшить производительность, вы можете кэшировать обменные курсы, используя механизм кэширования, такой как Redis или Memcached. Функция unstable_cache из Next.js (как используется в примере) предоставляет встроенное решение для кэширования. Не забывайте периодически инвалидировать кэш, чтобы обменные курсы оставались актуальными.

4. Аспекты интернационализации

При создании приложений для глобальной аудитории важно учитывать интернационализацию (i18n). Это включает:

• Форматирование чисел: Используйте соответствующие форматы чисел для разных локалей (например, использование запятых или точек в качестве десятичных разделителей).
• Форматирование валют: Отображайте символы и форматы валют в соответствии с локалью пользователя.
• Форматирование даты и времени: Используйте соответствующие форматы даты и времени для разных локалей.
• Локализация: Переводите интерфейс на разные языки.

Библиотеки, такие как Intl и react-intl, могут помочь вам реализовать i18n в ваших React-приложениях.

Примеры из реального мира и сценарии использования

• Электронная коммерция: Отображение стоимости доставки и предполагаемых сроков доставки в реальном времени по мере добавления пользователем товаров в корзину.
• Финансовые приложения: Предоставление котировок акций и обновлений портфеля в реальном времени.
• Бронирование путешествий: Отображение цен на авиабилеты и их доступности в реальном времени.
• Визуализация данных: Потоковая передача обновлений данных для диаграмм и графиков.
• Инструменты для совместной работы: Отображение обновлений документов и проектов в реальном времени.

Заключение

Потоковая передача ответов React Server Actions предлагает мощный способ улучшить пользовательский опыт ваших React-приложений. Предоставляя прогрессивные ответы форм, вы можете создавать более быстрые, отзывчивые и привлекательные формы, которые удерживают пользователей и повышают конверсию. Сочетая потоковую передачу ответов с такими техниками, как оптимистичные обновления и кэширование, вы можете создавать действительно исключительный пользовательский опыт.

По мере дальнейшего развития React Server Actions мы можем ожидать появления еще более мощных функций и возможностей, которые еще больше упростят разработку сложных и динамичных веб-приложений.

Для дальнейшего изучения

• Документация по Server Actions в Next.js
• Официальная документация React
• Streams API

Это руководство представляет собой всеобъемлющий обзор потоковой передачи ответов React Server Actions и ее применения для прогрессивных ответов форм. Поняв изложенные здесь концепции и техники, вы сможете использовать эту мощную функцию для создания более быстрых, отзывчивых и увлекательных веб-приложений.