Progressive Verbesserung mit Server Actions

Progressive Enhancement ist eine Strategie der Webentwicklung, bei der Sie mit einer funktionierenden HTML-Basis beginnen und darauf JavaScript-Funktionen aufbauen. Die grundlegende Funktionalität funktioniert für alle Benutzer, auch für Personen mit deaktiviertem JavaScript, langsamen Verbindungen oder unterstützenden Technologien. Benutzer mit aktiviertem JavaScript erhalten zusätzlich eine erweiterte Nutzungserfahrung.

Ein Formular mit action={serverAction} funktioniert auch ohne JavaScript als vollständige HTML-POST-Anfrage. Der Browser sendet das Formular ab, der Server führt die Aktion aus und gibt eine aktualisierte HTML-Seite zurück. Dieser Mechanismus bildet seit 1995 die Grundlage für Webformulare — Reacts Server Actions sind absichtlich damit kompatibel.

Wenn JavaScript nicht verfügbar ist, muss die Validierung auf dem Server erfolgen. Die Server Action validiert die Formulardaten. Falls die Validierung fehlschlägt, gibt sie den Fehlerzustand zurück. Der Server rendert die Seite mit den in das HTML eingebetteten Fehlermeldungen erneut. Die Benutzer sehen die Fehler, ohne dass clientseitiges JavaScript ausgeführt wird.

Wenn React die Seite hydratisiert, fängt es das Absenden von Formularen ab und verarbeitet es als asynchrone Aufrufe von Server Actions statt als vollständige POST-Anfragen. Die Benutzer erhalten eine Aktualisierung direkt auf der Seite ohne Neuladen, einen sichtbaren Wartezustand und eine optimistische Benutzeroberfläche — und das alles, ohne die zugrunde liegende Aktion oder Formularstruktur zu ändern.

Der Server rendert das Formular mit dem Anfangszustand, der in das HTML eingebettet ist. Bei der Hydration übernimmt React diesen Anfangszustand, ohne Flackern oder Abweichungen auszulösen. Der Hook useActionState ist darauf ausgelegt, den serverseitig gerenderten Anfangszustand sauber mit der clientseitigen Hydration abzugleichen.

React-Transitions ermöglichen es der Benutzeroberfläche, während eines Aufrufs einer Server Action interaktiv zu bleiben. Wenn Sie das Absenden des Formulars in eine Transition einschließen, kann React die Server-Rundreise nachrangig behandeln und die Seite responsiv halten. Dadurch fühlt sich die JavaScript-erweiterte Nutzungserfahrung deutlich schneller an als das vollständige Neuladen einer Seite.

Ohne JavaScript: Die Benutzer klicken auf „Senden“, der Browser sendet eine vollständige POST-Anfrage und der Server antwortet mit einer neuen HTML-Seite (einschließlich eines kurzen weißen Aufblitzens und der Zurücksetzung der Scrollposition). Mit JavaScript: React fängt die Anfrage ab, die Aktion wird asynchron ausgeführt und nur die geänderten Teile der Seite werden direkt aktualisiert — ohne Aufblitzen und ohne Zurücksetzen der Scrollposition.

Progressive Enhancement kommt Suchmaschinen-Crawlern zugute, die möglicherweise kein JavaScript ausführen. Eine formularbasierte Such- oder Filterseite, die als vollständiges HTML-Formular funktioniert, kann indexiert und gecrawlt werden. Serverseitig gerenderte Ergebnisse sorgen dafür, dass der Crawler echte Inhalte sieht und keine leeren div-Elemente, die auf JavaScript warten.

Screenreader und unterstützende Technologien funktionieren am besten mit semantischem HTML. Ein schrittweise erweitertes Formular verwendet echte Elemente wie <form>, <input> und <button>, die unterstützende Technologien von Haus aus verstehen. JavaScript fügt ARIA-Live-Regionen für Fehlermeldungen hinzu und erweitert damit die barrierefreie Basis, statt sie zu ersetzen.

In unzuverlässigen Netzwerken können JavaScript-Bundles möglicherweise nicht geladen werden. Eine schrittweise erweiterte Seite funktioniert für den grundlegenden Anwendungsfall trotzdem weiter. Diese Resilienz ist besonders für Benutzer mit mobilen Verbindungen in schlecht versorgten Gebieten wichtig oder in Regionen, in denen die Netzwerkbedingungen stark schwanken.

Progressive Enhancement ist besonders wertvoll für öffentlich zugängliche Formulare wie Registrierungs-, Kontakt-, Such- und Checkout-Formulare. Interne Dashboards mit komplexer Interaktivität benötigen es möglicherweise nicht. Setzen Sie es gezielt dort ein, wo eine maximale Reichweite und Zuverlässigkeit wichtig sind, etwa auf Marketingseiten, im E-Commerce und in Onboarding-Abläufen.

Progressive Enhancement bedeutet, dass das Formular als einfaches HTML-POST-Formular ohne JavaScript funktioniert. Server Actions unterstützen dies nativ: action={serverAction} ermöglicht das Absenden als vollständige POST-Anfrage. Die anschließende Hydration durch React erweitert das Formular zu asynchronen Aktualisierungen direkt auf der Seite mit Wartezuständen. Dieser Ansatz bietet Vorteile für Barrierefreiheit, SEO und Benutzer mit schlechter Netzwerkanbindung und ermöglicht gleichzeitig eine umfangreiche JavaScript-Nutzungserfahrung.