M

MLOG

Български

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

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

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

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

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

Ключовото предимство на 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' };
  }
}

Обяснение:

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 (
    

      
      
      
      {state?.message && 
{state.message}
}
    

  );
}

Обяснение:

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

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

'use server'

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

  // ...
}

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' };
  }
}

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
  // ...
}

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

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

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:

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

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

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

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

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

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

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

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

Заключение

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