Stateless sessie implementeren voor Next.js met behulp van Server Actions

Introductie#

Na de veelgeprezen release van de App Router, introduceerde Next.js een andere functie, Server Actions. Deze nieuwe innovatie faciliteert server-side datamanipulaties, vermindert de afhankelijkheid van client-side JavaScript en verbetert formulieren progressief - allemaal terwijl JavaScript en React worden gebruikt om robuuste webapplicaties te maken zonder de noodzaak van traditionele REST API's.

In dit artikel maken we gebruik van de overvloed aan voordelen die deze innovatie biedt en zien we het in actie wanneer we een cookie-gebaseerde stateless sessie voor Next.js implementeren. Dit stuk dient als een stapsgewijze handleiding die je door elke fase van het maken van een demoproject met behulp van de App Router loodst.

Onze praktische demonstratie kan gemakkelijk worden geïmplementeerd naar Vercel met behulp van Edge Runtime. En je kunt de volledige broncode downloaden van GitHub.

Afstappen van REST API's#

Traditioneel, als we een Next.js-webapp willen maken die een database in de backend opvraagt, kunnen we enkele REST API's maken om de authenticatietoestand te valideren en de database op te vragen, waarna de front-end React-app deze API's zal aanroepen. Maar als het niet nodig is om een API te openen voor het publiek en deze react-app de enige client is, lijkt het overbodig om REST API's te gebruiken, omdat ze alleen door onszelf worden aangeroepen.

Met Server Actions kan de React-component nu server-side code uitvoeren. In plaats van handmatig een API-eindpunt te moeten maken, maakt Server Actions automatisch een eindpunt voor Next.js om achter de schermen te gebruiken. Bij het aanroepen van een Server Action stuurt Next.js een POST-verzoek naar de pagina waarop je je bevindt, met metadata voor welke actie moet worden uitgevoerd.

De behoefte aan stateless sessie#

Als een voorkeursframework voor het creëren van stateless applicaties betekent Next.js vaak serverless, waarbij we het geheugen niet kunnen gebruiken om sessiegegevens op te slaan. Traditionele sessies vereisen het gebruik van een externe opslagdienst, zoals Redis of een database.

Echter, wanneer de sessiegegevens klein genoeg blijven, hebben we een alternatief: het ontwikkelen van een stateless sessie met behulp van veilige versleutelingsmethoden en cookies die aan de client-zijde worden opgeslagen. Deze methode omzeilt de noodzaak van externe opslag en houdt de sessiegegevens gedecentraliseerd, wat niet-triviale voordelen biedt met betrekking tot serverbelasting en de algehele applicatieprestaties.

Ons doel is dus een lichte, efficiënte stateless sessie die gebruikmaakt van de opslagcapaciteit aan de client-zijde en tegelijkertijd veiligheid garandeert door goed uitgevoerde versleuteling.

Basisimplementatie van sessie#

Allereerst moeten we een nieuw project initiëren:

Voor meer details over de installatie, raadpleeg de officiele handleiding.

Een sessiebibliotheek maken#

Om Server Actions beter te begrijpen, maken we eerst een vereenvoudigde versie van de sessie. In deze versie zullen we JSON gebruiken om sessiegegevens in cookies op te slaan.

Maak een bestand genaamd session/index.ts en voeg de volgende code toe:

De eerste regel "use server" markeert de functies van dit bestand als Server Actions.

Omdat we geen toegang kunnen krijgen tot request en response direct, gebruiken we next/headers om cookies te lezen en te schrijven. Dit is alleen beschikbaar in Server Actions.

In aantocht: nog twee Server Actions#

Met de sessiebibliotheek in werking, is het tijd om een inlog- en uitlogfunctie te implementeren om de bruikbaarheid van de sessie te demonstreren.

Voeg de volgende code toe aan user/index.ts:

Hier gebruiken we een 'nep' inlogproces dat slechts een gebruikersnaam vereist.

Het bouwen van de pagina#

In App Router is de pagina meestal een asynchrone component en kunnen Server Actions niet direct vanuit zo'n component worden aangeroepen. We moeten componenten maken met "use client":

components/sign-in.tsx

components/sign-out.tsx

Laten we ten slotte onze app/page.tsx construeren

Versleuteling implementeren#

De taak van Server Actions is voltooid. Nu betreft het laatste deel de implementatie van de versleuteling die met crypto kan worden gerealiseerd.

Pas vervolgens de sessiebibliotheek aan om het volgende te implementeren:

Conclusie#

Gefeliciteerd! Je hebt succesvol een stateless sessie voor Next.js geïmplementeerd. Hier is een online voorbeeld op Vercel, en je kunt de volledige broncode hier downloaden. We hopen dat deze handleiding je begrip van de gloednieuwe Server Actions bevordert.

Vervolgens gaan we onderzoeken hoe je Server Actions kunt gebruiken om Logto voor Next.js te integreren. Blijf op de hoogte!