Progresywne ulepszanie za pomocą Server Actions

Progresywne ulepszanie to strategia tworzenia stron internetowych, w której zaczyna się od działającej podstawy HTML, a następnie dodaje się do niej możliwości JavaScriptu. Podstawowe funkcje działają u wszystkich użytkowników, także u osób z wyłączonym JavaScriptem, wolnym połączeniem lub korzystających z technologii asystujących, natomiast użytkownicy z włączonym JavaScriptem otrzymują rozszerzone doświadczenie.

Formularz z atrybutem action={serverAction} działa jako pełnoekranowe żądanie HTML POST nawet bez JavaScriptu. Przeglądarka wysyła formularz, serwer wykonuje akcję, a następnie zwraca zaktualizowaną stronę HTML. To ten sam mechanizm, który obsługuje formularze internetowe od 1995 roku — Server Actions w React są z założenia z nim zgodne.

Gdy JavaScript jest niedostępny, walidacja musi odbywać się na serwerze. Server Action sprawdza dane formularza, a jeśli walidacja się nie powiedzie, zwraca stan błędu. Serwer ponownie renderuje stronę z komunikatami o błędach osadzonymi w kodzie HTML. Użytkownik widzi błędy bez uruchamiania jakiegokolwiek JavaScriptu po stronie klienta.

Gdy React przeprowadza hydratację strony, przechwytuje wysyłanie formularzy i obsługuje je jako asynchroniczne wywołania Server Action zamiast żądań POST przeładowujących całą stronę. Użytkownik otrzymuje aktualizację bezpośrednio w miejscu, bez przeładowania strony, widoczny stan oczekiwania oraz optymistyczny interfejs — wszystko to bez zmiany bazowej akcji ani struktury formularza.

Serwer renderuje formularz z początkowym stanem osadzonym w kodzie HTML. Podczas hydratacji React przejmuje ten początkowy stan bez powodowania migotania ani niezgodności. Hook useActionState został zaprojektowany tak, aby poprawnie uzgadniać początkowy stan wyrenderowany przez serwer ze stanem podczas hydratacji po stronie klienta.

Tranzycje Reacta pozwalają zachować interaktywność interfejsu podczas wywołania Server Action. Owijając wysłanie formularza w tranzycję, umożliwiamy Reactowi nadanie niższego priorytetu komunikacji z serwerem i zachowanie responsywności strony. Dzięki temu doświadczenie rozszerzone o JavaScript wydaje się znacznie szybsze niż przeładowanie całej strony.

Bez JavaScriptu: użytkownik klika przycisk wysyłania, przeglądarka wysyła pełne żądanie POST, a serwer odpowiada nową stroną HTML (pojawia się krótkie białe mignięcie, a pozycja przewijania zostaje zresetowana). Z JavaScriptem: React przechwytuje żądanie, akcja jest wykonywana asynchronicznie, a tylko zmienione fragmenty strony są aktualizowane w miejscu — bez mignięcia i bez resetowania pozycji przewijania.

Progresywne ulepszanie pomaga robotom wyszukiwarek, które mogą nie wykonywać JavaScriptu. Strona wyszukiwania lub filtrowania oparta na formularzu, działająca jako pełnoekranowy formularz HTML, może być indeksowana i przeszukiwana przez roboty. Wyniki renderowane przez serwer oznaczają, że robot widzi rzeczywistą treść, a nie puste elementy div oczekujące na JavaScript.

Czytniki ekranu i technologie asystujące najlepiej działają z semantycznym kodem HTML. Formularz z progresywnym ulepszaniem wykorzystuje prawdziwe elementy <form>, <input> i <button>, które technologie asystujące rozumieją natywnie. JavaScript dodaje dynamiczne regiony ARIA do ogłaszania błędów, rozszerzając dostępną podstawę zamiast ją zastępować.

W przypadku niestabilnych sieci pakiety JavaScriptu mogą nie załadować się poprawnie. Strona z progresywnym ulepszaniem nadal działa w podstawowym zakresie. Ta odporność jest szczególnie ważna dla użytkowników korzystających z połączeń mobilnych na obszarach o słabym zasięgu oraz w regionach, w których warunki sieciowe znacznie się zmieniają.

Progresywne ulepszanie jest najbardziej wartościowe w przypadku formularzy dostępnych publicznie: rejestracji, kontaktu, wyszukiwania i finalizacji zakupu. Wewnętrzne panele z rozbudowaną interaktywnością mogą go nie potrzebować. Należy stosować je świadomie tam, gdzie kluczowe są maksymalny zasięg i niezawodność, na przykład na stronach marketingowych, w handlu internetowym i w procesach wdrażania nowych użytkowników.

Jaka jest podstawowa zasada progresywnego ulepszania?

Progresywne ulepszanie oznacza, że formularz działa jako zwykłe żądanie HTML POST bez JavaScriptu. Server Actions obsługują to natywnie: action={serverAction} umożliwia wysłanie formularza jako żądania POST przeładowującego całą stronę. Następnie hydratacja Reacta przekształca formularz w asynchroniczne aktualizacje w miejscu ze stanami oczekiwania. Takie podejście przynosi korzyści w zakresie dostępności, SEO i działania przy słabym połączeniu, a jednocześnie zapewnia rozbudowane doświadczenie z użyciem JavaScriptu.