Detaillierte Erläuterung von Serveraktionen und zustandslosen Sitzungen in Next.js

Einführung

Mit der Veröffentlichung des weit verbreiteten App Routers hat Next.js eine wichtige neue Funktion eingeführt: Serveraktionen. Serveraktionen wurden entwickelt, um serverseitige Datenoperationen zu unterstützen. Durch die Reduzierung der Abhängigkeit von clientseitigem JavaScript verbessern sie schrittweise die Formularfunktionalität. Mit dieser Funktion können Entwickler leistungsstarke Webanwendungen mit JavaScript und React erstellen, ohne auf traditionelle REST-APIs angewiesen zu sein.

Dieser Artikel befasst sich eingehend mit den Vorteilen von Serveraktionen und demonstriert ihre praktische Anwendung durch die Implementierung zustandsloser Sitzungen auf Basis von Cookies. Gleichzeitig dient dieser Artikel als Schritt-für-Schritt-Anleitung und bietet eine detaillierte Einführung in den gesamten Prozess des Aufbaus eines Demonstrationsprojekts mit dem App Router.

REST-APIs loswerden

Im traditionellen Entwicklungsmodell ist es bei der Erstellung einer Next.js-Webanwendung, die eine Datenbank im Backend abfragt, in der Regel erforderlich, REST-APIs zu erstellen, um den Identitätsstatus zu überprüfen und die Datenbank abzufragen. Die React-Anwendung im Frontend ist für den Aufruf dieser APIs verantwortlich. Wenn die React-Anwendung jedoch der einzige Client ist und die APIs nicht für die Öffentlichkeit zugänglich gemacht werden müssen, kann die Verwendung von REST-APIs redundant sein, da diese APIs nur von der Anwendung selbst aufgerufen werden.

Mit Serveraktionen können React-Komponenten direkt serverseitigen Code ausführen. Entwickler müssen nicht manuell API-Endpunkte erstellen, und Next.js erstellt automatisch entsprechende Endpunkte für Serveraktionen im Hintergrund. Wenn eine Serveraktion aufgerufen wird, sendet Next.js eine POST-Anfrage mit Operationsmetadaten an die aktuelle Seite, um die entsprechende Operation auszuführen.

Die Notwendigkeit zustandsloser Sitzungen

Next.js, als bevorzugtes Framework für die Erstellung zustandsloser Anwendungen, läuft oft in einer serverlosen Umgebung, was bedeutet, dass die In-Memory-Speicherung von Sitzungsdaten nicht möglich ist. Die traditionelle Sitzungsverwaltung stützt sich in der Regel auf externe Speicherdienste, wie z. B. Redis oder eine Datenbank.

Wenn die Menge der Sitzungsdaten jedoch gering ist, besteht eine alternative Lösung darin, zustandslose Sitzungen durch sichere Verschlüsselungsmethoden und auf der Client-Seite gespeicherte Cookies zu entwerfen. Dieser Ansatz erfordert keinen externen Speicher, dezentralisiert Sitzungsdaten und hat erhebliche Vorteile bei der Reduzierung der Serverlast und der Verbesserung der Gesamtleistung der Anwendung. Daher ist es unser Ziel, ein leichtgewichtiges und effizientes zustandsloses Sitzungssystem aufzubauen, das die clientseitigen Speicherfunktionen voll ausschöpft und die Datensicherheit durch strenge Verschlüsselungsmaßnahmen gewährleistet.

Grundlegende Sitzungsimplementierung

Zuerst müssen Sie ein neues Projekt starten:

npx create-next-app@latest

Weitere Installationsdetails finden Sie im offiziellen Handbuch.

Erstellung der Sitzungsbibliothek

Um das Verständnis von Serveraktionen zu erleichtern, erstellen wir zunächst ein vereinfachtes Sitzungssystem. Diese Version verwendet JSON, um Sitzungsdaten in Cookies zu speichern.

Erstellen Sie die Datei session/index.ts und fügen Sie den folgenden Code hinzu:

"use server";

import { cookies } from 'next/headers';

export type Session = {
  username: string;
};

export const getSession = async (): Promise<Session | null> => {
  const cookieStore = cookies();
  const session = cookieStore.get('session');

  if (session?.value) {
    return JSON.parse(session.value) as Session;
  }

  return null;
};

export const setSession = async (session: Session) => {
  const cookieStore = cookies();
  cookieStore.set('session', JSON.stringify(session));
};

export const removeSession = async () => {
  const cookieStore = cookies();
  cookieStore.delete('session');
};

Die erste Zeile des Codes "use server" kennzeichnet die Funktionen in dieser Datei als Serveraktionen. Da ein direkter Zugriff auf request und response nicht möglich ist, wird hier next/headers zum Lesen und Schreiben von Cookies verwendet, und diese Funktionalität ist nur in Serveraktionen verfügbar.

Implementierung von zwei neuen Serveraktionen

Nachdem die Sitzungsbibliothek vorhanden ist, besteht der nächste Schritt darin, die Anmelde- und Abmeldefunktionen zu implementieren, um die Benutzerfreundlichkeit des Sitzungssystems zu demonstrieren.

Fügen Sie der Datei user/index.ts den folgenden Code hinzu:

"use server";

import { removeSession, setSession } from '@/session';

export const signIn = async (username: string) => {
  await setSession({ username });
};

export const signOut = async () => {
  await removeSession();
};

Hier wird ein vereinfachter Anmeldeprozess verwendet, und die Anmeldung erfordert nur die Eingabe des Benutzernamens.

Erstellung der Seite

Im App Router sind Seiten in der Regel asynchrone Komponenten, und Serveraktionen können nicht direkt von solchen Komponenten aufgerufen werden. Sie müssen Komponenten mit "use client" erstellen:

components/sign-in.tsx

"use client";

import { signIn } from '@/user';
import { useState } from'react';

const SignIn = () => {
  const [username, setUsername] = useState('');

  return (
    <div>
      <input
        type="text"
        value={username}
        placeholder="username"
        onChange={(event) => {
          setUsername(event.target.value);
        }}
      />
      <button
        disabled={!username}
        onClick={() => {
          signIn(username);
        }}
      >
        Sign In
      </button>
    </div>
  );
};

export default SignIn;

components/sign-out.tsx

"use client";

import { signOut } from '@/user';

const SignOut = () => {
  return (
    <button
      onClick={() => {
        signOut();
      }}
    >
      Sign Out
    </button>
  );
};

export default SignOut;

Erstellen Sie schließlich die app/page.tsx:

import { getSession } from '@/session';
import styles from './page.module.css';
import SignIn from '../components/sign-in';
import SignOut from '@/components/sign-out';

export default async function Home() {
  const session = await getSession();

  return (
    <main className={styles.main}>
      {session? (
        <div>
          <div>You are logged in as {session.username}</div>
          <div>
            <SignOut />
          </div>
        </div>
      ) : (
        <SignIn />
      )}
    </main>
  );
}

Implementierung der Verschlüsselung

Nach der Implementierung der relevanten Funktionen von Serveraktionen besteht der letzte Schritt darin, die Verschlüsselungsfunktion zu implementieren, die über das Modul crypto abgeschlossen werden kann.

session/encrypt.ts

import { createCipheriv, createDecipheriv } from 'crypto';

// Replace with your own key and iv
// You can generate them using crypto.randomBytes(32) and crypto.randomBytes(16)
const key = Buffer.from('17204a84b538359abe8ba74807efa12a068c20a7c7f224b35198acf832cea57b', 'hex');
const iv = Buffer.from('da1cdcd9fe4199c835bd5f1d56446aff', 'hex');
const algorithm = 'aes-256-cbc';

export const encrypt = (text: string) => {
  const cipher = createCipheriv(algorithm, key, iv);
  const encrypted = cipher.update(text, 'utf8', 'base64');
  return `${encrypted}${cipher.final('base64')}`;
};

export const decrypt = (encrypted: string) => {
  const decipher = createDecipheriv(algorithm, key, iv);
  const decrypted = decipher.update(encrypted, 'base64', 'utf8');
  return `${decrypted}${decipher.final('utf8')}`;
};

Ändern Sie anschließend die Sitzungsbibliothek, um die Verschlüsselungsfunktion zu implementieren:

"use server";

import { cookies } from 'next/headers';
import { decrypt, encrypt } from './encrypt';

export type Session = {
  username: string;
};

export const getSession = async (): Promise<Session | null> => {
  const cookieStore = cookies();
  const session = cookieStore.get('session');

  if (session?.value) {
    try {
      const decrypted = decrypt(session.value);
      return JSON.parse(decrypted) as Session;
    } catch {
      // Ignore invalid sessions
    }
  }

  return null;
};

export const setSession = async (session: Session) => {
  const cookieStore = cookies();
  const encrypted = encrypt(JSON.stringify(session));
  cookieStore.set('session', encrypted);
};

export const removeSession = async () => {
  const cookieStore = cookies();
  cookieStore.delete('session');
};

Leapcell: Das Beste aus Serverless Web Hosting

Schließlich empfehle ich eine Plattform, die sich am besten für die Bereitstellung von Webservices eignet: Leapcell

🚀 Mit Ihrer Lieblingssprache entwickeln

Mühelose Entwicklung in JavaScript, Python, Go oder Rust.

🌍 Unbegrenzte Projekte kostenlos bereitstellen

Zahlen Sie nur für das, was Sie nutzen – keine Anfragen, keine Gebühren.

⚡ Pay-as-You-Go, keine versteckten Kosten

Keine Leerlaufgebühren, nur nahtlose Skalierbarkeit.

📖 Entdecken Sie unsere Dokumentation

🔹 Folgen Sie uns auf Twitter: @LeapcellHQ