Server Actions w React 19 i Next.js

Server Actions to funkcje asynchroniczne wykonywane na serwerze, a nie w przeglądarce. Są oznaczane dyrektywą 'use server' umieszczoną na początku pliku lub na początku treści funkcji. Sygnalizuje ona frameworkowi, że dana funkcja nigdy nie może być wykonywana po stronie klienta.

Ponieważ Server Actions są uruchamiane na serwerze, mają dostęp do pełnego kontekstu serwera: połączeń z bazą danych, sekretów środowiskowych, danych sesji i zasobów systemu plików. To zasadniczo różni je od komponentów klienckich, które mają dostęp tylko do tego, co udostępnia przeglądarka.

Gdy komponent kliencki wywołuje Server Action, Next.js automatycznie wykonuje żądanie HTTP POST do specjalnego punktu końcowego RSC. Framework obsługuje całą serializację argumentów i warstwę transportu, więc nie trzeba ręcznie pisać wywołań fetch() dla tych mutacji.

Server Actions eliminują potrzebę korzystania z tras API w wielu scenariuszach obejmujących mutacje. Sama akcja jest punktem końcowym — logikę definiuje się raz jako funkcję serwerową, a następnie wywołuje bezpośrednio z komponentu klienckiego, tak jak lokalną funkcję.

Server Actions były początkowo koncepcją specyficzną dla Next.js, ale React 19 podnosi je do rangi funkcji pierwszej klasy Reacta. Oznacza to, że bundlery i frameworki inne niż Next.js mogą implementować ten sam wzorzec zgodnie ze specyfikacją Reacta.

Server Actions są eksperymentalne w React 19 RC, ale od momentu wprowadzenia są stabilne w Next.js 14+ App Router. Jeśli buduje się dziś aplikację produkcyjną z użyciem Next.js App Router, Server Actions są w pełni obsługiwanym i zalecanym wzorcem.

Jedną z najważniejszych właściwości bezpieczeństwa Server Actions jest to, że sekrety nigdy nie trafiają do przeglądarki. Zmienne środowiskowe, takie jak hasła do baz danych i klucze API używane wewnątrz Server Action, nigdy nie są dołączane do bundla klienckiego, ponieważ treść funkcji nigdy nie jest wysyłana do przeglądarki.

Elementy formularza HTML przyjmują Server Action bezpośrednio za pośrednictwem atrybutu action: <form action={myServerAction}>. React przechwytuje przesłanie formularza i wywołuje Server Action z danymi formularza, umożliwiając wykonanie mutacji po stronie serwera bez dodatkowej obsługi JavaScript po stronie klienta.

Po uruchomieniu Server Action React serializuje argumenty akcji do treści żądania POST. Serwer je deserializuje, wykonuje funkcję, serializuje wartość zwracaną i odsyła ją z powrotem. Przez granicę mogą przechodzić tylko wartości, które można serializować (ciągi znaków, liczby, tablice i zwykłe obiekty).

Server Action można zdefiniować na poziomie modułu w pliku, na którego początku znajduje się 'use server', albo wstawić ją bezpośrednio w Server Component, umieszczając 'use server' na początku funkcji asynchronicznej. Oba podejścia dają ten sam rezultat: funkcję, którą można wywoływać wyłącznie na serwerze.

Komponenty klienckie importują i wywołują Server Actions tak samo jak zwykłe funkcje asynchroniczne. Składnia wywołania jest identyczna jak w przypadku lokalnej funkcji asynchronicznej, ale wykonanie odbywa się w całości na serwerze. Ta abstrakcja pozwala zachować przejrzystość komponentów klienckich i uniknąć powtarzalnego kodu związanego z fetch.

Który z poniższych opisów najlepiej przedstawia model bezpieczeństwa Server Actions?

Server Actions to asynchroniczne funkcje wykonywane po stronie serwera, oznaczone przez 'use server'. Zachowują dostęp do kontekstu serwera, takiego jak połączenia z bazą danych i sekrety środowiskowe. Next.js automatycznie obsługuje transport HTTP, a React 19 udostępnia je jako funkcję niezależną od frameworka. Formularze mogą korzystać z nich bezpośrednio za pomocą atrybutu action, a sekrety znajdujące się wewnątrz tych funkcji nigdy nie trafiają do przeglądarki.