React Server Actions: Опростена обработка на формуляри от страна на сървъра

React Server Actions, въведени в React 18 и значително подобрени в Next.js, предлагат революционен подход за обработка на изпращане на формуляри и промени на данни директно на сървъра. Тази мощна функционалност опростява процеса на разработка, повишава сигурността и подобрява производителността в сравнение с традиционното извличане и манипулиране на данни от страна на клиента.

Какво представляват React Server Actions?

Server Actions са асинхронни функции, които се изпълняват на сървъра и могат да бъдат извиквани директно от React компоненти. Те ви позволяват да извършвате задачи от страна на сървъра, като например:

• Изпращане на формуляри: Обработвайте данните от формуляри сигурно на сървъра.
• Промени на данни: Актуализирайте бази данни или външни API-та.
• Автентикация: Обработвайте влизания и регистрации на потребители.
• Сървърна логика: Изпълнявайте сложна бизнес логика, без да я излагате на клиента.

Ключовото предимство на Server Actions е, че те ви позволяват да пишете сървърен код във вашите React компоненти, елиминирайки нуждата от отделни API пътища и сложна логика за извличане на данни от страна на клиента. Това съвместно разположение на UI и сървърна логика води до по-лесен за поддръжка и по-ефективен код.

Предимства от използването на React Server Actions

Използването на React Server Actions предоставя няколко значителни предимства:

Опростена разработка

Server Actions намаляват стандартния (boilerplate) код, като ви позволяват да обработвате изпращането на формуляри и промените на данни директно във вашите React компоненти. Това елиминира нуждата от отделни API ендпойнти и сложна логика за извличане на данни от страна на клиента, като по този начин оптимизира процеса на разработка и прави кода ви по-лесен за разбиране и поддръжка. Представете си проста форма за контакт. Без Server Actions ще ви е необходим отделен API път за обработка на изпращането на формуляра, JavaScript от страна на клиента за изпращане на данните и логика за обработка на грешки както на клиента, така и на сървъра. Със Server Actions всичко това може да се обработи в рамките на самия компонент.

Повишена сигурност

Чрез изпълнение на кода на сървъра, Server Actions намаляват площта за атака на вашето приложение. Чувствителните данни и бизнес логиката се пазят далеч от клиента, което предотвратява възможността злонамерени потребители да ги манипулират. Например, данни за достъп до база данни или API ключове никога не се излагат в кода от страна на клиента. Всички взаимодействия с базата данни се случват на сървъра, което намалява риска от SQL инжекции или неоторизиран достъп до данни.

Подобрена производителност

Server Actions могат да подобрят производителността, като намалят количеството JavaScript, което трябва да бъде изтеглено и изпълнено на клиента. Това е особено полезно за потребители с по-малко мощни устройства или с бавни интернет връзки. Обработката на данни се случва на сървъра, а до клиента се изпращат само необходимите актуализации на потребителския интерфейс, което води до по-бързо зареждане на страниците и по-гладко потребителско изживяване.

Оптимистични актуализации

Server Actions се интегрират безпроблемно с React Suspense и Transitions, което позволява оптимистични актуализации. Оптимистичните актуализации ви позволяват да актуализирате потребителския интерфейс незабавно, дори преди сървърът да е потвърдил действието. Това осигурява по-отзивчиво и ангажиращо потребителско изживяване, тъй като потребителите не трябва да чакат отговор от сървъра, преди да видят резултатите от своите действия. В електронната търговия добавянето на продукт в количката може да се покаже веднага, докато сървърът потвърждава добавянето във фонов режим.

Прогресивно подобряване

Server Actions поддържат прогресивно подобряване (progressive enhancement), което означава, че вашето приложение може да функционира дори ако JavaScript е деактивиран или не успее да се зареди. Когато JavaScript е деактивиран, формулярите ще се изпращат като традиционни HTML формуляри, а сървърът ще обработи изпращането и ще пренасочи потребителя към нова страница. Това гарантира, че вашето приложение остава достъпно за всички потребители, независимо от конфигурацията на браузъра или условията на мрежата им. Това е особено важно за достъпността и SEO.

Как да използваме React Server Actions

За да използвате React Server Actions, трябва да използвате фреймуърк, който ги поддържа, като например Next.js. Ето ръководство стъпка по стъпка:

1. Дефиниране на Server Action

Създайте асинхронна функция, която ще се изпълнява на сървъра. Тази функция трябва да обработва логиката, която искате да изпълните на сървъра, като например актуализиране на база данни или извикване на API. Маркирайте функцията с директивата `"use server"` в началото, за да покажете, че това е Server Action. Тази директива указва на компилатора на 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' };
  }
}
            

              
                Copy
              
            
          

Обяснение:

• Директивата `'use server'` маркира тази функция като Server Action.
• `revalidatePath('/')` изчиства кеша на пътя, като гарантира, че актуализираните данни ще бъдат извлечени при следващата заявка. Това е от решаващо значение за поддържането на консистентност на данните.
• `saveMessage(message)` е заместител на вашата реална логика за взаимодействие с базата данни. Предполага се, че имате дефинирана функция `saveMessage` на друго място, която се грижи за запазването на съобщението във вашата база данни.
• Функцията връща обект за състояние (state), който може да се използва за показване на обратна връзка на потребителя.

2. Импортиране и използване на Server Action във вашия компонент

Импортирайте Server Action във вашия React компонент и го използвайте като `action` prop на елемент от формуляр. Хукът `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:
      
      Submit
      {state?.message && 
{state.message}
}
    
  );
}
            

              
                Copy
              
            
          

Обяснение:

• Директивата `'use client'` указва, че това е клиентски компонент (тъй като използва `useFormState`).
• `useFormState(createMessage, {message: ''})` инициализира състоянието на формуляра със Server Action `createMessage`. Вторият аргумент е първоначалното състояние.
• Пропът `action` на елемента `form` е зададен на `formAction`, върнат от `useFormState`.
• Променливата `state` съдържа върнатата стойност от Server Action, която може да се използва за показване на обратна връзка на потребителя.

3. Обработка на данните от формуляра

Вътре в Server Action можете да получите достъп до данните от формуляра, като използвате `FormData` API. Този API предоставя удобен начин за достъп до стойностите на полетата на формуляра.

            'use server'

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

  // ...
}
            

              
                Copy
              
            
          

4. Обработка на грешки

Използвайте `try...catch` блокове за обработка на грешки, които могат да възникнат по време на изпълнението на Server Action. Върнете съобщение за грешка в обекта на състоянието, за да го покажете на потребителя.

            'use server'

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

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

              
                Copy
              
            
          

5. Ревалидиране на данни

След като Server Action е променил успешно данни, може да се наложи да ревалидирате кеша с данни, за да сте сигурни, че потребителският интерфейс отразява най-новите промени. Използвайте функциите `revalidatePath` или `revalidateTag` от `next/cache`, за да ревалидирате конкретни пътища или тагове.

            'use server'

import { revalidatePath } from 'next/cache';

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

              
                Copy
              
            
          

Разширено използване

Промяна на данни

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

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

Server Actions могат да се използват за обработка на автентикация и оторизация. Чрез извършване на проверки за автентикация и оторизация на сървъра, можете да гарантирате, че само оторизирани потребители имат достъп до чувствителни данни и функционалности. Можете да използвате Server Actions за обработка на влизания, регистрации и нулиране на пароли на потребители. Например, Server Action може да провери потребителските данни спрямо база данни и да върне токен, който може да се използва за автентикиране на последващи заявки.

Edge функции

Server Actions могат да бъдат внедрени като Edge функции, които се изпълняват в глобална мрежа от сървъри, близки до вашите потребители. Това може значително да намали латентността и да подобри производителността, особено за потребители в географски разпръснати местоположения. Edge функциите са идеални за обработка на Server Actions, които изискват ниска латентност, като актуализации на данни в реално време или доставка на персонализирано съдържание. Next.js предоставя вградена поддръжка за внедряване на Server Actions като Edge функции.

Стрийминг

Server Actions поддържат стрийминг, което ви позволява да изпращате данни до клиента на части, веднага щом станат налични. Това може да подобри възприеманата производителност на вашето приложение, особено за Server Actions, чието изпълнение отнема много време. Стриймингът е особено полезен за обработка на големи набори от данни или сложни изчисления. Например, можете да стриймвате резултати от търсене до клиента, докато се извличат от базата данни, предоставяйки по-отзивчиво потребителско изживяване.

Добри практики

Ето някои добри практики, които да следвате при използване на React Server Actions:

• Поддържайте Server Actions малки и фокусирани: Всяко Server Action трябва да изпълнява една единствена, добре дефинирана задача. Това прави кода ви по-лесен за разбиране, тестване и поддръжка.
• Използвайте описателни имена: Избирайте имена, които ясно показват целта на Server Action. Например, `createComment` или `updateUserProfile` са по-добри от общи имена като `processData`.
• Валидирайте данните на сървъра: Винаги валидирайте данните на сървъра, за да предотвратите злонамерени потребители да инжектират невалидни данни във вашето приложение. Това включва валидиране на типове данни, формати и диапазони.
• Обработвайте грешките елегантно: Използвайте `try...catch` блокове за обработка на грешки и предоставяйте информативни съобщения за грешки на потребителя. Избягвайте излагането на чувствителна информация за грешки на клиента.
• Използвайте оптимистични актуализации: Осигурете по-отзивчиво потребителско изживяване, като актуализирате потребителския интерфейс незабавно, дори преди сървърът да е потвърдил действието.
• Ревалидирайте данните при необходимост: Уверете се, че потребителският интерфейс отразява най-новите промени, като ревалидирате кеша с данни, след като Server Action е променил данни.

Примери от реалния свят

Нека разгледаме някои примери от реалния свят за това как React Server Actions могат да се използват в различни видове приложения:

Приложение за електронна търговия

• Добавяне на продукт в количката за пазаруване: Server Action може да обработи добавянето на продукт в количката на потребителя и да актуализира общата сума в базата данни. Могат да се използват оптимистични актуализации за незабавно показване на продукта в количката.
• Обработка на плащане: Server Action може да обработи плащане, използвайки платежен портал на трета страна. Server Action може също да актуализира статуса на поръчката в базата данни и да изпрати имейл за потвърждение на потребителя.
• Изпращане на ревю за продукт: Server Action може да обработи изпращането на ревю за продукт и да го запази в базата данни. Server Action може също да изчисли средния рейтинг за продукта и да актуализира страницата с детайли за продукта.

Приложение за социални медии

• Публикуване на нов туит: Server Action може да обработи публикуването на нов туит и да го запази в базата данни. Server Action може също да актуализира времевата линия на потребителя и да уведоми неговите последователи.
• Харесване на публикация: Server Action може да обработи харесването на публикация и да актуализира броя на харесванията в базата данни. Могат да се използват оптимистични актуализации за незабавно показване на актуализирания брой харесвания.
• Следване на потребител: Server Action може да обработи следването на потребител и да актуализира броя на последователите и следваните в базата данни.

Система за управление на съдържанието (CMS)

• Създаване на нова публикация в блог: Server Action може да обработи създаването на нова публикация в блог и да я запази в базата данни. Server Action може също да генерира slug за публикацията и да актуализира картата на сайта.
• Актуализиране на страница: Server Action може да обработи актуализирането на страница и да я запази в базата данни. Server Action може също да ревалидира кеша на страницата, за да гарантира, че актуализираното съдържание се показва на потребителите.
• Публикуване на промяна: Server Action може да обработи публикуването на промяна в базата данни и да уведоми всички абонати.

Съображения за интернационализация

При разработване на приложения за глобална аудитория е от съществено значение да се вземат предвид интернационализацията (i18n) и локализацията (l10n). Ето някои съображения при използването на React Server Actions в интернационализирани приложения:

• Обработка на различни формати за дата и час: Използвайте `Intl` API за форматиране на дати и часове според локала на потребителя.
• Обработка на различни числови формати: Използвайте `Intl` API за форматиране на числа според локала на потребителя.
• Обработка на различни валути: Използвайте `Intl` API за форматиране на валути според локала на потребителя.
• Превод на съобщения за грешки: Преведете съобщенията за грешки на езика на потребителя.
• Поддръжка на езици с писане отдясно наляво (RTL): Уверете се, че вашето приложение поддържа RTL езици, като арабски и иврит.

Например, при обработка на формуляр, който изисква въвеждане на дата, Server Action може да използва `Intl.DateTimeFormat` API, за да парсира датата според локала на потребителя, като гарантира, че датата е правилно интерпретирана независимо от регионалните настройки на потребителя.

Заключение

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