Implementierung einer zustandslosen Sitzung für Next.js mit Server Actions

Einführung#

Nach dem gefeierten Release des App Routers hat Next.js eine weitere Funktion eingeführt: Server Actions. Diese neue Innovation erleichtert serverseitige Datenmanipulationen, reduziert die Abhängigkeit von clientseitigem JavaScript und verbessert progressiv Formulare – und das alles unter Verwendung von JavaScript und React, um robuste Web-Anwendungen zu erstellen, ohne traditionelle REST-APIs zu benötigen.

In diesem Artikel nutzen wir die Fülle der Vorteile dieser Innovation und setzen sie um, indem wir eine cookie-basierte zustandslose Sitzung für Next.js implementieren. Dieser Beitrag dient als schrittweise Anleitung, die dich durch jede Phase der Erstellung eines Demo-Projekts mit dem App Router führt.

Unsere praktische Demonstration kann problemlos auf Vercel mit Edge Runtime bereitgestellt werden. Und du kannst den vollständigen Quellcode von GitHub herunterladen.

Abkehr von REST-APIs#

Traditionell, wenn wir eine Next.js-Webanwendung erstellen möchten, die im Backend Datenbankabfragen stellt, erstellen wir möglicherweise einige REST-APIs, um den Authentifizierungszustand zu validieren und die Datenbank abzufragen. Dann ruft die Frontend-React-App diese APIs auf. Aber wenn keine Notwendigkeit besteht, die API der Öffentlichkeit zugänglich zu machen, und diese React-App der einzige Client ist, scheint es überflüssig, REST-APIs zu verwenden, da sie nur von uns selbst aufgerufen werden.

Mit Server Actions kann die React-Komponente jetzt serverseitigen Code ausführen. Anstatt einen API-Endpunkt manuell erstellen zu müssen, erstellen Server Actions automatisch einen Endpunkt, den Next.js im Hintergrund verwendet. Wenn eine Server Action aufgerufen wird, sendet Next.js eine POST-Anfrage an die aktuelle Seite mit Metadaten darüber, welche Aktion ausgeführt werden soll.

Die Notwendigkeit einer zustandslosen Sitzung#

Als bevorzugtes Framework zur Erstellung zustandsloser Anwendungen bedeutet Next.js oft "serverless", was bedeutet, dass wir den Speicher nicht verwenden können, um Sitzungsdaten zu speichern. Traditionelle Sitzungen erfordern die Nutzung eines externen Speicher-Dienstes, wie Redis oder einer Datenbank.

Wenn jedoch die Sitzungsdaten klein genug bleiben, haben wir eine alternative Möglichkeit: Wir können eine zustandslose Sitzung unter Verwendung sicherer Verschlüsselungsmethoden und Cookies, die auf der Client-Seite gespeichert werden, erstellen. Diese Methode umgeht die Notwendigkeit eines externen Speichers und hält die Sitzungsdaten dezentral, was erhebliche Vorteile hinsichtlich der Serverlast und Gesamtleistung der Anwendung bietet.

Unser Ziel ist also eine leichte, effiziente zustandslose Sitzung, die die Speichermöglichkeiten der Client-Seite nutzt und gleichzeitig durch gut ausgeführte Verschlüsselung Sicherheit gewährleistet.

Grundlegende Sitzungsimplementierung#

Zuerst müssen wir ein neues Projekt einleiten:

Für weitere Details zur Installation, siehe den offiziellen Leitfaden.

Erstellung einer Sitzungsbibliothek#

Um das Verständnis der Server Actions zu erleichtern, erstellen wir zuerst eine vereinfachte Version der Sitzung. In dieser Version verwenden wir JSON, um Sitzungsdaten in Cookies zu speichern.

Erstelle eine Datei namens session/index.ts und füge den folgenden Code ein:

Die erste Zeile "use server" kennzeichnet die Funktionen dieser Datei als Server Actions.

Da wir keinen direkten Zugriff auf request und response haben, verwenden wir next/headers, um Cookies zu lesen und zu schreiben. Dies ist nur in Server Actions verfügbar.

Eingehend: zwei weitere Server Actions#

Mit der Sitzungsbibliothek in der Hand ist es an der Zeit, eine Anmelde- und Abmeldefunktion zu implementieren, um die Nutzbarkeit der Sitzung zu demonstrieren.

Integriere den folgenden Code in user/index.ts:

Hier verwenden wir einen 'vorgetäuschten' Anmeldeprozess, der lediglich einen Benutzernamen erfordert.

Erstellung der Seite#

Im App Router ist die Seite in der Regel eine asynchrone Komponente, und Server Actions können nicht direkt von einer solchen Komponente aus aufgerufen werden. Wir müssen Komponenten mit "use client" erstellen:

components/sign-in.tsx

components/sign-out.tsx

Konstruiere schließlich unsere app/page.tsx

Implementierung der Verschlüsselung#

Die Aufgabe der Server Actions ist erledigt. Jetzt geht es im letzten Teil der Verschlüsselungsimplementierung, die durch crypto umgesetzt werden kann.

Als nächstes passe die Sitzungsbibliothek an, um Folgendes zu implementieren:

Fazit#

Herzlichen Glückwunsch! Du hast erfolgreich eine zustandslose Sitzung für Next.js implementiert. Hier ist eine Online-Vorschau auf Vercel, und du kannst den vollständigen Quellcode hier herunterladen. Wir hoffen, dass dieser Leitfaden dein Verständnis der brandneuen Server Actions unterstützt.

Als nächstes werden wir erforschen, wie man Server Actions zur Integration von Logto in Next.js verwendet. Bleib dran!