M

MLOG

Polski

Poznaj React Server Actions, potężną funkcję do obsługi przesyłania formularzy i mutacji danych bezpośrednio na serwerze, upraszczającą rozwój React i zwiększającą bezpieczeństwo.

React Server Actions: Uproszczone Przetwarzanie Formularzy po Stronie Serwera

React Server Actions, wprowadzone w React 18 i znacznie ulepszone w Next.js, oferują rewolucyjne podejście do obsługi przesyłania formularzy i mutacji danych bezpośrednio na serwerze. Ta potężna funkcja upraszcza proces tworzenia, zwiększa bezpieczeństwo i poprawia wydajność w porównaniu z tradycyjnym pobieraniem i manipulowaniem danymi po stronie klienta.

Czym są React Server Actions?

Server Actions to asynchroniczne funkcje, które działają na serwerze i mogą być wywoływane bezpośrednio z komponentów React. Pozwalają one wykonywać zadania po stronie serwera, takie jak:

Kluczową zaletą Server Actions jest to, że umożliwiają pisanie kodu po stronie serwera wewnątrz komponentów React, eliminując potrzebę oddzielnych ścieżek API i złożonej logiki pobierania danych po stronie klienta. To współlokalizowanie interfejsu użytkownika i logiki po stronie serwera prowadzi do bardziej łatwego w utrzymaniu i wydajnego kodu.

Korzyści z Używania React Server Actions

Używanie React Server Actions zapewnia kilka istotnych korzyści:

Uproszczone Tworzenie

Server Actions redukują ilość kodu szablonowego, umożliwiając obsługę przesyłania formularzy i mutacji danych bezpośrednio w komponentach React. Eliminuje to potrzebę oddzielnych punktów końcowych API i złożonej logiki pobierania danych po stronie klienta, usprawniając proces tworzenia i czyniąc kod łatwiejszym do zrozumienia i utrzymania. Rozważmy prosty formularz kontaktowy. Bez Server Actions potrzebna byłaby oddzielna ścieżka API do obsługi przesyłania formularza, JavaScript po stronie klienta do wysyłania danych oraz logika obsługi błędów zarówno po stronie klienta, jak i serwera. Dzięki Server Actions wszystko to można obsłużyć w samym komponencie.

Zwiększone Bezpieczeństwo

Uruchamiając kod na serwerze, Server Actions zmniejszają powierzchnię ataku aplikacji. Wrażliwe dane i logika biznesowa są przechowywane z dala od klienta, uniemożliwiając złośliwym użytkownikom manipulowanie nimi. Na przykład dane uwierzytelniające bazy danych lub klucze API nigdy nie są ujawniane w kodzie po stronie klienta. Wszystkie interakcje z bazą danych odbywają się na serwerze, zmniejszając ryzyko wstrzyknięcia SQL lub nieautoryzowanego dostępu do danych.

Poprawiona Wydajność

Server Actions mogą poprawić wydajność, zmniejszając ilość JavaScript, która musi zostać pobrana i wykonana na kliencie. Jest to szczególnie korzystne dla użytkowników na urządzeniach o małej mocy lub z wolnym połączeniem internetowym. Przetwarzanie danych odbywa się na serwerze, a tylko niezbędne aktualizacje interfejsu użytkownika są wysyłane do klienta, co skutkuje szybszym ładowaniem stron i płynniejszym działaniem.

Optymistyczne Aktualizacje

Server Actions płynnie integrują się z Suspense i Transitions w React, umożliwiając optymistyczne aktualizacje. Optymistyczne aktualizacje pozwalają na natychmiastową aktualizację interfejsu użytkownika, nawet zanim serwer potwierdzi działanie. Zapewnia to bardziej responsywne i angażujące wrażenia użytkownika, ponieważ użytkownicy nie muszą czekać na odpowiedź serwera, aby zobaczyć wyniki swoich działań. W e-commerce dodanie produktu do koszyka może być wyświetlane natychmiast, podczas gdy serwer potwierdza dodanie w tle.

Progresywne Ulepszanie

Server Actions obsługują progresywne ulepszanie, co oznacza, że aplikacja może nadal działać, nawet jeśli JavaScript jest wyłączony lub nie uda się go załadować. Gdy JavaScript jest wyłączony, formularze będą przesyłane jako tradycyjne formularze HTML, a serwer obsłuży przesłanie i przekieruje użytkownika na nową stronę. Zapewnia to, że aplikacja pozostaje dostępna dla wszystkich użytkowników, niezależnie od konfiguracji przeglądarki lub warunków sieciowych. Jest to szczególnie ważne dla dostępności i SEO.

Jak Używać React Server Actions

Aby używać React Server Actions, należy korzystać z frameworka, który je obsługuje, takiego jak Next.js. Oto przewodnik krok po kroku:

1. Zdefiniuj Server Action

Utwórz asynchroniczną funkcję, która będzie uruchamiana na serwerze. Funkcja ta powinna obsługiwać logikę, którą chcesz wykonać na serwerze, na przykład aktualizację bazy danych lub wywołanie API. Oznacz funkcję dyrektywą "use server" na górze, aby wskazać, że jest to Server Action. Ta dyrektywa informuje kompilator React, aby traktował funkcję jako funkcję po stronie serwera i automatycznie obsługiwał serializację i deserializację danych między klientem a serwerem.

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

Wyjaśnienie:

2. Zaimportuj i Użyj Server Action w Swoim Komponencie

Zaimportuj Server Action do swojego komponentu React i użyj go jako prop action w elemencie formularza. Hook useFormState może być używany do zarządzania stanem formularza i wyświetlania informacji zwrotnych użytkownikowi.

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

  );
}

Wyjaśnienie:

3. Obsługa Danych Formularza

Wewnątrz Server Action możesz uzyskać dostęp do danych formularza za pomocą API FormData. To API zapewnia wygodny sposób dostępu do wartości pól formularza.

'use server'

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

  // ...
}

4. Obsługa Błędów

Użyj bloków try...catch, aby obsługiwać błędy, które mogą wystąpić podczas wykonywania Server Action. Zwróć komunikat o błędzie w obiekcie stanu, aby wyświetlić go użytkownikowi.

'use server'

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

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

5. Ponowna Walidacja Danych

Po pomyślnej mutacji danych przez Server Action może być konieczne ponowne sprawdzenie poprawności pamięci podręcznej danych, aby upewnić się, że interfejs użytkownika odzwierciedla najnowsze zmiany. Użyj funkcji revalidatePath lub revalidateTag z next/cache, aby ponownie zweryfikować określone ścieżki lub tagi.

'use server'

import { revalidatePath } from 'next/cache';

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

Zaawansowane Użycie

Mutacja Danych

Server Actions są szczególnie dobrze przystosowane do mutacji danych, takich jak aktualizacja baz danych lub zewnętrznych API. Możesz użyć Server Actions do obsługi złożonych mutacji danych, które wymagają logiki po stronie serwera, takiej jak walidacja danych, wykonywanie obliczeń lub interakcja z wieloma źródłami danych. Rozważmy scenariusz, w którym musisz zaktualizować profil użytkownika i wysłać e-mail z potwierdzeniem. Server Action może obsługiwać zarówno aktualizację bazy danych, jak i proces wysyłania wiadomości e-mail w jednej, atomowej operacji.

Uwierzytelnianie i Autoryzacja

Server Actions mogą być używane do obsługi uwierzytelniania i autoryzacji. Wykonując kontrole uwierzytelniania i autoryzacji na serwerze, możesz mieć pewność, że tylko autoryzowani użytkownicy mają dostęp do wrażliwych danych i funkcji. Możesz użyć Server Actions do obsługi logowania użytkowników, rejestracji i resetowania haseł. Na przykład Server Action może zweryfikować dane uwierzytelniające użytkownika w bazie danych i zwrócić token, który może być używany do uwierzytelniania kolejnych żądań.

Funkcje Edge

Server Actions można wdrażać jako Funkcje Edge, które działają w globalnej sieci serwerów blisko użytkowników. Może to znacznie zmniejszyć opóźnienia i poprawić wydajność, szczególnie dla użytkowników w rozproszonych geograficznie lokalizacjach. Funkcje Edge są idealne do obsługi Server Actions, które wymagają niskich opóźnień, takich jak aktualizacje danych w czasie rzeczywistym lub spersonalizowane dostarczanie treści. Next.js zapewnia wbudowaną obsługę wdrażania Server Actions jako Funkcji Edge.

Strumieniowanie

Server Actions obsługują strumieniowanie, które umożliwia wysyłanie danych do klienta w fragmentach, gdy staną się dostępne. Może to poprawić postrzeganą wydajność aplikacji, szczególnie w przypadku Server Actions, których wykonanie zajmuje dużo czasu. Strumieniowanie jest szczególnie przydatne do obsługi dużych zbiorów danych lub złożonych obliczeń. Na przykład możesz przesyłać strumieniowo wyniki wyszukiwania do klienta podczas ich pobierania z bazy danych, zapewniając bardziej responsywne wrażenia użytkownika.

Najlepsze Praktyki

Oto kilka najlepszych praktyk, których należy przestrzegać podczas korzystania z React Server Actions:

Przykłady z Życia Wzięte

Rozważmy kilka przykładów z życia wziętych, jak React Server Actions mogą być używane w różnych typach aplikacji:

Aplikacja E-commerce

Aplikacja Społecznościowa

System Zarządzania Treścią (CMS)

Uwagi dotyczące Internacjonalizacji

Podczas tworzenia aplikacji dla globalnej publiczności niezbędne jest uwzględnienie internacjonalizacji (i18n) i lokalizacji (l10n). Oto kilka uwag dotyczących używania React Server Actions w aplikacjach zinternacjonalizowanych:

Na przykład, podczas przetwarzania formularza, który wymaga wprowadzenia daty, Server Action może użyć API Intl.DateTimeFormat do przeanalizowania daty zgodnie z ustawieniami regionalnymi użytkownika, zapewniając poprawne zinterpretowanie daty niezależnie od ustawień regionalnych użytkownika.

Wniosek

React Server Actions to potężne narzędzie do upraszczania przetwarzania formularzy po stronie serwera i mutacji danych w aplikacjach React. Umożliwiając pisanie kodu po stronie serwera bezpośrednio w komponentach React, Server Actions redukują ilość kodu szablonowego, zwiększają bezpieczeństwo, poprawiają wydajność i umożliwiają optymistyczne aktualizacje. Postępując zgodnie z najlepszymi praktykami opisanymi w tym przewodniku, możesz wykorzystać Server Actions do budowania bardziej solidnych, skalowalnych i łatwych w utrzymaniu aplikacji React. W miarę jak React ewoluuje, Server Actions niewątpliwie będą odgrywać coraz ważniejszą rolę w przyszłości tworzenia stron internetowych.