Implementacja bezstanowej sesji dla Next.js przy użyciu Server Actions

Wprowadzenie#

Po niezwykle entuzjastycznie przyjętej premierze App Router Next.js wprowadził kolejną funkcję, Server Actions. Ta nowa innowacja ułatwia manipulacje danymi po stronie serwera, zmniejsza zależność od JavaScriptu po stronie klienta i stopniowo poprawia formularze - wszystko to przy użyciu JavaScriptu i Reacta do tworzenia solidnych aplikacji internetowych bez potrzeby korzystania z tradycyjnych API REST.

W tym artykule korzystamy z zalet oferowanych przez tę innowację i zobaczymy ją w akcji podczas implementacji bezstanowej sesji opartej na ciasteczkach dla Next.js. Ten artykuł to krok po kroku przewodnik, który przeprowadzi cię przez każdy etap tworzenia projektu demonstracyjnego przy użyciu App Routera.

Nasza praktyczna demonstracja może być łatwo wdrożona do Vercel przy użyciu Edge Runtime. Możesz pobrać pełny kod źródłowy z GitHub.

Rezygnacja z API REST#

Tradycyjnie, jeśli chcemy stworzyć aplikację internetową Next.js, która wykonuje zapytania do bazy danych po stronie serwera, możemy stworzyć pewne API REST do weryfikacji stanu uwierzytelnienia i zapytań do bazy danych, a następnie aplikacja frontendowa React wywoła te API. Jednak jeśli nie ma potrzeby udostępniania API publicznie i jeśli ta aplikacja React jest jedynym klientem, wydaje się niepotrzebne korzystanie z API REST, skoro będą one wywoływane tylko przez nas samych.

Dzięki Server Actions, komponent React może teraz uruchamiać kod po stronie serwera. Zamiast ręcznie tworzyć punkt końcowy API, Server Actions automatycznie tworzą punkt końcowy dla Next.js, którego używane za kulisami. Podczas wywoływania Server Action, Next.js wysyła POST żądanie do strony, na której jesteś, z metadanymi dotyczącymi, którą akcję uruchomić.

Potrzeba bezstanowej sesji#

Next.js jako preferowany framework do tworzenia aplikacji bezstanowych często oznacza bezserwerowość, w której nie możemy używać pamięci do przechowywania danych sesji. Tradycyjna sesja wymaga używania zewnętrznej usługi przechowywania, takiej jak Redis lub baza danych.

Jednak gdy dane sesji pozostają na tyle małe, mamy alternatywną ścieżkę: opracujemy bezstanową sesję przy użyciu bezpiecznych metod szyfrowania i ciasteczek przechowywanych po stronie klienta. Ta metoda omija potrzebę korzystania z zewnętrznego przechowywania i utrzymuje dane sesji zdecentralizowane, oferując istotne korzyści względem obciążenia serwera i ogólnej wydajności aplikacji.

Naszym celem jest lekka, wydajna bezstanowa sesja, która będzie wykorzystywać możliwości przechowywania po stronie klienta, zapewniając jednocześnie bezpieczeństwo dzięki dobrze wykonanej funkcji szyfrowania.

Podstawowa implementacja sesji#

Najpierw musimy zainicjować nowy projekt:

Więcej szczegółów dotyczących instalacji znajdziesz w oficjalnym poradniku.

Tworzenie biblioteki sesji#

Aby ułatwić zrozumienie Server Actions, najpierw stworzymy uproszczoną wersję sesji. W tej wersji użyjemy JSON do przechowywania danych sesji w ciasteczkach.

Utwórz plik o nazwie session/index.ts i dodaj do niego następujący kod:

Pierwsza linia "use server" oznacza funkcję tego pliku jako Server Actions.

Ponieważ nie możemy bezpośrednio dostąpić request i response, używamy next/headers do odczytu i zapisu ciasteczek. Jest to dostępne tylko w Server Actions.

Wprowadzenie: dwie dodatkowe Server Actions#

Mając już bibliotekę sesji, czas na zaimplementowanie funkcji logowania i wylogowywania, aby pokazać użyteczność sesji.

Wprowadź następujący kod do pliku user/index.ts:

Tutaj używamy 'udawanego' procesu logowania, który wymaga jedynie podania nazwy użytkownika.

Budowanie strony#

W App Routerze strona jest zazwyczaj asynchronicznym komponentem, a Server Actions nie mogą być bezpośrednio wywoływane z takiego komponentu. Musimy utworzyć komponenty używając "use client":

components/sign-in.tsx

components/sign-out.tsx

W końcu zbudujmy nasz app/page.tsx

Implementacja szyfrowania#

Zadanie Server Actions zostało wykonane. Teraz ostatnia część polega na implementacji szyfrowania, które można osiągnąć przy pomocy crypto.

Następnie zmodyfikuj bibliotekę sesji, aby wdrożyć następujące zmiany:

Podsumowanie#

Gratulacje! Udało ci się wdrożyć bezstanową sesję dla Next.js. Oto dostępny na żywo podgląd na Vercel, a pełny kod źródłowy można pobrać tutaj. Mamy nadzieję, że ten przewodnik pomoże ci zrozumieć zupełnie nowe Server Actions.

Następnie będziemy badać, jak używać Server Actions do integracji z Logto dla Next.js. Bądź na bieżąco!