Серверні дії React: спрощена обробка форм на стороні сервера

Серверні дії (Server Actions) React, представлені в React 18 і значно вдосконалені в Next.js, пропонують революційний підхід до обробки надсилань форм і мутацій даних безпосередньо на сервері. Ця потужна функція спрощує процес розробки, підвищує безпеку та покращує продуктивність у порівнянні з традиційним отриманням та маніпулюванням даними на стороні клієнта.

Що таке серверні дії React?

Серверні дії — це асинхронні функції, які виконуються на сервері та можуть викликатися безпосередньо з компонентів React. Вони дозволяють виконувати завдання на стороні сервера, такі як:

• Надсилання форм: Безпечна обробка даних форми на сервері.
• Мутації даних: Оновлення баз даних або зовнішніх API.
• Автентифікація: Обробка входу та реєстрації користувачів.
• Серверна логіка: Виконання складної бізнес-логіки без її розкриття клієнту.

Ключова перевага серверних дій полягає в тому, що вони дозволяють писати серверний код у ваших компонентах React, усуваючи потребу в окремих маршрутах API та складній логіці отримання даних на стороні клієнта. Таке поєднання UI та серверної логіки призводить до більш зручної в обслуговуванні та ефективної кодової бази.

Переваги використання серверних дій React

Використання серверних дій React надає кілька значних переваг:

Спрощена розробка

Серверні дії зменшують кількість шаблонного коду, дозволяючи обробляти надсилання форм та мутації даних безпосередньо у ваших компонентах React. Це усуває потребу в окремих кінцевих точках API та складній логіці отримання даних на стороні клієнта, спрощуючи процес розробки та роблячи ваш код легшим для розуміння та підтримки. Розглянемо просту контактну форму. Без серверних дій вам знадобився б окремий маршрут API для обробки надсилання форми, клієнтський JavaScript для відправки даних та логіка обробки помилок як на клієнті, так і на сервері. З серверними діями все це можна обробити в самому компоненті.

Підвищена безпека

Виконуючи код на сервері, серверні дії зменшують поверхню атаки вашого застосунку. Конфіденційні дані та бізнес-логіка залишаються поза клієнтом, що не дозволяє зловмисникам маніпулювати ними. Наприклад, облікові дані бази даних або ключі API ніколи не розкриваються в клієнтському коді. Всі взаємодії з базою даних відбуваються на сервері, що знижує ризик SQL-ін'єкцій або несанкціонованого доступу до даних.

Покращена продуктивність

Серверні дії можуть покращити продуктивність, зменшуючи кількість JavaScript, який потрібно завантажувати та виконувати на клієнті. Це особливо корисно для користувачів на малопотужних пристроях або з повільним інтернет-з'єднанням. Обробка даних відбувається на сервері, і лише необхідні оновлення UI надсилаються клієнту, що призводить до швидшого завантаження сторінок та більш плавного користувацького досвіду.

Оптимістичні оновлення

Серверні дії безшовно інтегруються з Suspense та Transitions у React, що дозволяє реалізувати оптимістичні оновлення. Оптимістичні оновлення дозволяють негайно оновлювати 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('/'); // Очистити кеш маршруту
    return { message: 'Повідомлення успішно збережено!' };
  } catch (e) {
    return { 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 (
    

      Повідомлення:
      
      Надіслати
      {state?.message && 
{state.message}
}
    
  );
}

Пояснення:

• Директива `'use client'` вказує, що це клієнтський компонент (оскільки він використовує `useFormState`).
• `useFormState(createMessage, {message: ''})` ініціалізує стан форми за допомогою серверної дії `createMessage`. Другий аргумент — це початковий стан.
• Пропс `action` елемента `form` встановлено на `formAction`, що повертається хуком `useFormState`.
• Змінна `state` містить значення, повернуте серверною дією, яке можна використовувати для відображення зворотного зв'язку користувачеві.

3. Обробка даних форми

Всередині серверної дії ви можете отримати доступ до даних форми за допомогою API `FormData`. Цей 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: 'Не вдалося зберегти повідомлення' };
  }
}

5. Ревалідація даних

Після того, як серверна дія успішно змінила дані, вам може знадобитися ревалідувати кеш даних, щоб переконатися, що UI відображає останні зміни. Використовуйте функції `revalidatePath` або `revalidateTag` з `next/cache` для ревалідації конкретних шляхів або тегів.

'use server'

import { revalidatePath } from 'next/cache';

export async function createMessage(prevState, formData) {
  // ...
  revalidatePath('/'); // Очистити кеш маршруту
  // ...
}

Розширене використання

Мутація даних

Серверні дії особливо добре підходять для мутації даних, таких як оновлення баз даних або зовнішніх API. Ви можете використовувати серверні дії для обробки складних мутацій даних, які вимагають серверної логіки, наприклад, перевірки даних, виконання обчислень або взаємодії з кількома джерелами даних. Розглянемо сценарій, де вам потрібно оновити профіль користувача та надіслати лист-підтвердження. Серверна дія може обробити як оновлення бази даних, так і процес надсилання листа в одній атомарній операції.

Автентифікація та авторизація

Серверні дії можна використовувати для обробки автентифікації та авторизації. Виконуючи перевірки автентифікації та авторизації на сервері, ви можете гарантувати, що лише авторизовані користувачі мають доступ до конфіденційних даних та функціональності. Ви можете використовувати серверні дії для обробки входу користувачів, реєстрації та скидання пароля. Наприклад, серверна дія може перевірити облікові дані користувача в базі даних і повернути токен, який можна використовувати для автентифікації наступних запитів.

Edge-функції

Серверні дії можна розгортати як Edge-функції, які виконуються у глобальній мережі серверів, розташованих близько до ваших користувачів. Це може значно зменшити затримку та покращити продуктивність, особливо для користувачів у географічно віддалених місцях. Edge-функції ідеально підходять для обробки серверних дій, які вимагають низької затримки, таких як оновлення даних у реальному часі або доставка персоналізованого контенту. Next.js надає вбудовану підтримку для розгортання серверних дій як Edge-функцій.

Стримінг

Серверні дії підтримують стримінг, що дозволяє надсилати дані клієнту частинами, у міру їх доступності. Це може покращити сприйняття продуктивності вашого застосунку, особливо для серверних дій, які виконуються довго. Стримінг особливо корисний для обробки великих наборів даних або складних обчислень. Наприклад, ви можете передавати результати пошуку клієнту в міру їх отримання з бази даних, забезпечуючи більш чуйний користувацький досвід.

Найкращі практики

Ось деякі найкращі практики, яких слід дотримуватися при використанні серверних дій React:

• Робіть серверні дії невеликими та сфокусованими: Кожна серверна дія повинна виконувати одне, чітко визначене завдання. Це робить ваш код легшим для розуміння, тестування та підтримки.
• Використовуйте описові імена: Вибирайте імена, які чітко вказують на призначення серверної дії. Наприклад, `createComment` або `updateUserProfile` краще, ніж загальні імена, такі як `processData`.
• Перевіряйте дані на сервері: Завжди перевіряйте дані на сервері, щоб запобігти введенню недійсних даних зловмисниками у ваш застосунок. Це включає перевірку типів даних, форматів та діапазонів.
• Граційно обробляйте помилки: Використовуйте блоки `try...catch` для обробки помилок та надавайте інформативні повідомлення про помилки користувачеві. Уникайте розкриття конфіденційної інформації про помилки клієнту.
• Використовуйте оптимістичні оновлення: Забезпечуйте більш чуйний користувацький досвід, оновлюючи UI негайно, навіть до того, як сервер підтвердить дію.
• Ревалідуйте дані за потреби: Переконайтеся, що UI відображає останні зміни, ревалідуючи кеш даних після того, як серверна дія змінила дані.

Приклади з реального світу

Розглянемо деякі приклади з реального світу, як серверні дії React можуть використовуватися в різних типах застосунків:

Застосунок для електронної комерції

• Додавання товару в кошик: Серверна дія може обробити додавання товару в кошик користувача та оновлення загальної суми в базі даних. Оптимістичні оновлення можна використовувати для негайного відображення товару в кошику.
• Обробка платежу: Серверна дія може обробити платіж за допомогою стороннього платіжного шлюзу. Серверна дія також може оновити статус замовлення в базі даних та надіслати лист-підтвердження користувачеві.
• Надсилання відгуку про товар: Серверна дія може обробити надсилання відгуку про товар і зберегти його в базі даних. Серверна дія також може розрахувати середній рейтинг товару та оновити сторінку з деталями товару.

Застосунок для соціальних мереж

• Публікація нового твіту: Серверна дія може обробити публікацію нового твіту та зберегти його в базі даних. Серверна дія також може оновити стрічку користувача та повідомити його підписників.
• Лайк допису: Серверна дія може обробити лайк допису та оновити кількість лайків у базі даних. Оптимістичні оновлення можна використовувати для негайного відображення оновленої кількості лайків.
• Підписка на користувача: Серверна дія може обробити підписку на користувача та оновити кількість підписників та підписок у базі даних.

Система управління контентом (CMS)

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

Аспекти інтернаціоналізації

При розробці застосунків для глобальної аудиторії важливо враховувати інтернаціоналізацію (i18n) та локалізацію (l10n). Ось деякі аспекти використання серверних дій React в інтернаціоналізованих застосунках:

• Обробка різних форматів дати та часу: Використовуйте API `Intl` для форматування дат та часу відповідно до локалі користувача.
• Обробка різних числових форматів: Використовуйте API `Intl` для форматування чисел відповідно до локалі користувача.
• Обробка різних валют: Використовуйте API `Intl` для форматування валют відповідно до локалі користувача.
• Переклад повідомлень про помилки: Перекладайте повідомлення про помилки на мову користувача.
• Підтримка мов із письмом справа наліво (RTL): Переконайтеся, що ваш застосунок підтримує RTL-мови, такі як арабська та іврит.

Наприклад, при обробці форми, яка вимагає введення дати, серверна дія може використовувати API `Intl.DateTimeFormat` для розбору дати відповідно до локалі користувача, гарантуючи, що дата буде правильно інтерпретована незалежно від регіональних налаштувань користувача.

Висновок

Серверні дії React — це потужний інструмент для спрощення обробки форм на стороні сервера та мутацій даних у застосунках React. Дозволяючи писати серверний код безпосередньо у ваших компонентах React, серверні дії зменшують кількість шаблонного коду, підвищують безпеку, покращують продуктивність та дозволяють реалізувати оптимістичні оновлення. Дотримуючись найкращих практик, викладених у цьому посібнику, ви можете використовувати серверні дії для створення більш надійних, масштабованих та зручних у підтримці застосунків React. Оскільки React продовжує розвиватися, серверні дії, безсумнівно, відіграватимуть все більш важливу роль у майбутньому веб-розробки.