M

MLOG

Deutsch

Entdecken Sie React Server Actions zur direkten serverseitigen Handhabung von Formulareingaben, was die React-Entwicklung vereinfacht und die Sicherheit erhöht.

React Server Actions: Serverseitige Formularverarbeitung vereinfacht

React Server Actions, eingeführt in React 18 und in Next.js erheblich verbessert, bieten einen revolutionären Ansatz zur direkten serverseitigen Verarbeitung von Formulareingaben und Datenmutationen. Diese leistungsstarke Funktion vereinfacht den Entwicklungsprozess, erhöht die Sicherheit und verbessert die Leistung im Vergleich zum traditionellen clientseitigen Datenabruf und zur Manipulation.

Was sind React Server Actions?

Server Actions sind asynchrone Funktionen, die auf dem Server ausgeführt und direkt von React-Komponenten aufgerufen werden können. Sie ermöglichen es Ihnen, serverseitige Aufgaben auszuführen, wie zum Beispiel:

Der Hauptvorteil von Server Actions besteht darin, dass sie es Ihnen ermöglichen, serverseitigen Code direkt in Ihren React-Komponenten zu schreiben. Dies beseitigt die Notwendigkeit separater API-Routen und komplexer clientseitiger Datenabruflogik. Diese Bündelung von UI und serverseitiger Logik führt zu einer wartungsfreundlicheren und effizienteren Codebasis.

Vorteile der Verwendung von React Server Actions

Die Verwendung von React Server Actions bietet mehrere wesentliche Vorteile:

Vereinfachte Entwicklung

Server Actions reduzieren Boilerplate-Code, indem sie es Ihnen ermöglichen, Formulareingaben und Datenmutationen direkt in Ihren React-Komponenten zu handhaben. Dies beseitigt die Notwendigkeit separater API-Endpunkte und komplexer clientseitiger Datenabruflogik, was den Entwicklungsprozess optimiert und Ihren Code leichter verständlich und wartbar macht. Betrachten Sie ein einfaches Kontaktformular. Ohne Server Actions bräuchten Sie eine separate API-Route zur Verarbeitung der Formulareingabe, clientseitiges JavaScript zum Senden der Daten und Fehlerbehandlungslogik sowohl auf dem Client als auch auf dem Server. Mit Server Actions kann all dies innerhalb der Komponente selbst gehandhabt werden.

Erhöhte Sicherheit

Indem der Code auf dem Server ausgeführt wird, reduzieren Server Actions die Angriffsfläche Ihrer Anwendung. Sensible Daten und Geschäftslogik werden vom Client ferngehalten, was böswillige Benutzer daran hindert, sie zu manipulieren. Beispielsweise werden Datenbankzugangsdaten oder API-Schlüssel niemals im clientseitigen Code offengelegt. Alle Datenbankinteraktionen finden auf dem Server statt, was das Risiko von SQL-Injection oder unbefugtem Datenzugriff mindert.

Verbesserte Leistung

Server Actions können die Leistung verbessern, indem sie die Menge an JavaScript reduzieren, die auf dem Client heruntergeladen und ausgeführt werden muss. Dies ist besonders vorteilhaft für Benutzer mit leistungsschwachen Geräten oder langsamen Internetverbindungen. Die Datenverarbeitung erfolgt auf dem Server, und nur die notwendigen UI-Aktualisierungen werden an den Client gesendet, was zu schnelleren Ladezeiten und einer flüssigeren Benutzererfahrung führt.

Optimistische Updates

Server Actions integrieren sich nahtlos in Reacts Suspense und Transitions und ermöglichen so optimistische Updates. Optimistische Updates erlauben es Ihnen, die Benutzeroberfläche sofort zu aktualisieren, noch bevor der Server die Aktion bestätigt hat. Dies sorgt für eine reaktionsschnellere und ansprechendere Benutzererfahrung, da die Benutzer nicht auf die Antwort des Servers warten müssen, um die Ergebnisse ihrer Aktionen zu sehen. Im E-Commerce kann das Hinzufügen eines Artikels zum Warenkorb sofort angezeigt werden, während der Server die Hinzufügung im Hintergrund bestätigt.

Progressive Enhancement

Server Actions unterstützen Progressive Enhancement, was bedeutet, dass Ihre Anwendung auch dann noch funktioniert, wenn JavaScript deaktiviert ist oder nicht geladen werden kann. Wenn JavaScript deaktiviert ist, werden Formulare als traditionelle HTML-Formulare gesendet, und der Server übernimmt die Verarbeitung und leitet den Benutzer auf eine neue Seite um. Dies stellt sicher, dass Ihre Anwendung für alle Benutzer zugänglich bleibt, unabhängig von ihrer Browserkonfiguration oder den Netzwerkbedingungen. Dies ist besonders wichtig für die Barrierefreiheit und SEO.

Wie man React Server Actions verwendet

Um React Server Actions zu verwenden, benötigen Sie ein Framework, das sie unterstützt, wie zum Beispiel Next.js. Hier ist eine Schritt-für-Schritt-Anleitung:

1. Die Server Action definieren

Erstellen Sie eine asynchrone Funktion, die auf dem Server ausgeführt wird. Diese Funktion sollte die Logik handhaben, die Sie auf dem Server ausführen möchten, wie z. B. das Aktualisieren einer Datenbank oder das Aufrufen einer API. Kennzeichnen Sie die Funktion mit der `"use server"`-Direktive am Anfang, um anzuzeigen, dass es sich um eine Server Action handelt. Diese Direktive weist den React-Compiler an, die Funktion als serverseitige Funktion zu behandeln und die Serialisierung und Deserialisierung von Daten zwischen Client und Server automatisch zu handhaben.

// app/actions.js
'use server'

import { revalidatePath } from 'next/cache';
import { saveMessage } from './db';

export async function createMessage(prevState, formData) {
  const message = formData.get('message');

  try {
    await saveMessage(message);
    revalidatePath('/'); // Clear the route cache
    return { message: 'Message saved successfully!' };
  } catch (e) {
    return { message: 'Failed to save message' };
  }
}

Erklärung:

2. Die Server Action in Ihre Komponente importieren und verwenden

Importieren Sie die Server Action in Ihre React-Komponente und verwenden Sie sie als `action`-Prop für ein Formularelement. Der `useFormState`-Hook kann verwendet werden, um den Zustand des Formulars zu verwalten und dem Benutzer Feedback anzuzeigen.

// app/page.jsx
'use client';

import { useFormState } from 'react-dom';
import { createMessage } from './actions';

export default function Home() {
  const [state, formAction] = useFormState(createMessage, {message: ''});

  return (
    

      
      
      
      {state?.message && 
{state.message}
}
    

  );
}

Erklärung:

3. Formulardaten verarbeiten

Innerhalb der Server Action können Sie auf die Formulardaten über die `FormData`-API zugreifen. Diese API bietet eine bequeme Möglichkeit, auf die Werte von Formularfeldern zuzugreifen.

'use server'

export async function createMessage(prevState, formData) {
  const message = formData.get('message');

  // ...
}

4. Fehlerbehandlung

Verwenden Sie `try...catch`-Blöcke, um Fehler zu behandeln, die während der Ausführung der Server Action auftreten können. Geben Sie eine Fehlermeldung im Zustandsobjekt zurück, um sie dem Benutzer anzuzeigen.

'use server'

export async function createMessage(prevState, formData) {
  const message = formData.get('message');

  try {
    // ...
  } catch (e) {
    return { message: 'Failed to save message' };
  }
}

5. Daten revalidieren

Nachdem eine Server Action Daten erfolgreich mutiert hat, müssen Sie möglicherweise den Daten-Cache revalidieren, um sicherzustellen, dass die Benutzeroberfläche die neuesten Änderungen widerspiegelt. Verwenden Sie die Funktionen `revalidatePath` oder `revalidateTag` aus `next/cache`, um bestimmte Pfade oder Tags zu revalidieren.

'use server'

import { revalidatePath } from 'next/cache';

export async function createMessage(prevState, formData) {
  // ...
  revalidatePath('/'); // Clear the route cache
  // ...
}

Erweiterte Nutzung

Daten mutieren

Server Actions eignen sich besonders gut zum Mutieren von Daten, wie zum Beispiel dem Aktualisieren von Datenbanken oder externen APIs. Sie können Server Actions verwenden, um komplexe Datenmutationen zu handhaben, die serverseitige Logik erfordern, wie die Validierung von Daten, die Durchführung von Berechnungen oder die Interaktion mit mehreren Datenquellen. Stellen Sie sich ein Szenario vor, in dem Sie das Profil eines Benutzers aktualisieren und eine Bestätigungs-E-Mail senden müssen. Eine Server Action kann sowohl die Datenbankaktualisierung als auch den E-Mail-Versand in einer einzigen, atomaren Operation abwickeln.

Authentifizierung und Autorisierung

Server Actions können zur Handhabung von Authentifizierung und Autorisierung verwendet werden. Indem Sie Authentifizierungs- und Autorisierungsprüfungen auf dem Server durchführen, können Sie sicherstellen, dass nur autorisierte Benutzer Zugriff auf sensible Daten und Funktionalitäten haben. Sie können Server Actions verwenden, um Benutzeranmeldungen, Registrierungen und das Zurücksetzen von Passwörtern zu verwalten. Beispielsweise kann eine Server Action Benutzeranmeldeinformationen mit einer Datenbank abgleichen und ein Token zurückgeben, das zur Authentifizierung nachfolgender Anfragen verwendet werden kann.

Edge-Funktionen

Server Actions können als Edge-Funktionen bereitgestellt werden, die auf einem globalen Netzwerk von Servern in der Nähe Ihrer Benutzer ausgeführt werden. Dies kann die Latenz erheblich reduzieren und die Leistung verbessern, insbesondere für Benutzer an geografisch verteilten Standorten. Edge-Funktionen sind ideal für die Handhabung von Server Actions, die eine geringe Latenz erfordern, wie z. B. Echtzeit-Datenaktualisierungen oder die Bereitstellung personalisierter Inhalte. Next.js bietet integrierte Unterstützung für die Bereitstellung von Server Actions als Edge-Funktionen.

Streaming

Server Actions unterstützen Streaming, was es Ihnen ermöglicht, Daten in Teilen an den Client zu senden, sobald sie verfügbar sind. Dies kann die wahrgenommene Leistung Ihrer Anwendung verbessern, insbesondere bei Server Actions, deren Ausführung lange dauert. Streaming ist besonders nützlich für die Verarbeitung großer Datenmengen oder komplexer Berechnungen. Zum Beispiel können Sie Suchergebnisse an den Client streamen, während sie aus der Datenbank abgerufen werden, was zu einer reaktionsschnelleren Benutzererfahrung führt.

Best Practices

Hier sind einige Best Practices, die Sie bei der Verwendung von React Server Actions befolgen sollten:

Beispiele aus der Praxis

Betrachten wir einige Beispiele aus der Praxis, wie React Server Actions in verschiedenen Anwendungsarten eingesetzt werden können:

E-Commerce-Anwendung

Social-Media-Anwendung

Content-Management-System (CMS)

Überlegungen zur Internationalisierung

Bei der Entwicklung von Anwendungen für ein globales Publikum ist es unerlässlich, Internationalisierung (i18n) und Lokalisierung (l10n) zu berücksichtigen. Hier sind einige Überlegungen zur Verwendung von React Server Actions in internationalisierten Anwendungen:

Beispielsweise kann eine Server Action bei der Verarbeitung eines Formulars, das eine Datumseingabe erfordert, die `Intl.DateTimeFormat`-API verwenden, um das Datum entsprechend der Ländereinstellung des Benutzers zu parsen. Dadurch wird sichergestellt, dass das Datum unabhängig von den regionalen Einstellungen des Benutzers korrekt interpretiert wird.

Fazit

React Server Actions sind ein leistungsstarkes Werkzeug zur Vereinfachung der serverseitigen Formularverarbeitung und Datenmutationen in React-Anwendungen. Indem sie es Ihnen ermöglichen, serverseitigen Code direkt in Ihren React-Komponenten zu schreiben, reduzieren Server Actions Boilerplate-Code, erhöhen die Sicherheit, verbessern die Leistung und ermöglichen optimistische Updates. Wenn Sie die in diesem Leitfaden beschriebenen Best Practices befolgen, können Sie Server Actions nutzen, um robustere, skalierbarere und wartbarere React-Anwendungen zu erstellen. Da sich React ständig weiterentwickelt, werden Server Actions zweifellos eine immer wichtigere Rolle in der Zukunft der Webentwicklung spielen.