React-Trends 2025

 (robinwieruch.de)
16 Punkte von xguru 2025-03-24 | 1 Kommentare | Auf WhatsApp teilen
  • React entwickelt sich zu einem Full-Stack-Framework, das die Grenze zwischen Client und Server auflöst
  • Die monopolartige Stellung von Next.js wird schwächer, während TanStack Start und React Router als Wettbewerber aufsteigen
  • React wird in Bereichen wie Formulare, State-Management, Server Components und AI-Integration leistungsfähiger
  • React-Entwickler müssen sich künftig mit Full-Stack-Umgebungen vertraut machen

React Server Components (RSC)

  • React Server Components (RSC) sind eine Funktion, die die Größe von clientseitigen JavaScript-Bundles reduziert und die Performance optimiert
    • Erste Ankündigung: 21. Dezember 2020
    • Erste Implementierung: Einführung des App Router in Next.js 13 (2022)
    • Mit Next.js 15 (2024) wurde ein deutlich stabilerer Zustand erreicht
    • Es wird erwartet, dass React Router und TanStack Start RSC ebenfalls bald einführen
  • Funktionsweise von RSC
    • Wird einmal auf dem Server ausgeführt, und nur das gerenderte Ergebnis wird an den Client gesendet
    • Weniger clientseitiges JavaScript
    • Zugriff auf Datenbanken und APIs auf dem Server möglich (höhere Sicherheit)

React Server Functions (RSF)

  • React Server Actions (RSA) → eine aus RSC weiterentwickelte Form, mit der Daten auf dem Server geändert und aktualisiert werden können
    • Serverfunktionen werden im Stil von Remote Procedure Calls (RPC) ausgeführt, ohne API-Routen zu definieren
    • Verwendet die Direktive use server
  • React Server Functions (RSF)
    • Im September 2024 stellte das React-Team RSF als übergreifendes Konzept vor, das RSA einschließt
    • Funktioniert sowohl in RSC als auch in Client Components
    • Umfasst sowohl das Lesen als auch das Ändern von Daten
  • Implementierungen in Next.js, TanStack Start und React Router sind geplant

Verbesserungen bei React Forms

  • In React 19 wurden formularbezogene Funktionen deutlich verbessert
    • Über das Attribut action von <form> lassen sich Server Actions direkt aufrufen
    • Neue Hooks hinzugefügt
      • useFormStatus, useOptimistic, useActionState
    • Verbesserte Verwaltung komplexer Formularzustände
  • Kompatibel mit bestehenden Bibliotheken
    • Bestehende Bibliotheken wie React Hook Form können weiterhin verwendet werden
    • Die integrierte Formularverarbeitung von React ist leistungsfähiger und flexibler geworden

Library vs Framework (Bibliothek vs. Framework)

  • React hat inzwischen den Charakter eines Frameworks und ist nicht mehr nur eine einfache Bibliothek
    • Unterstützt Client-Side Rendering (CSR), Server-Side Rendering (SSR), Static Site Generation (SSG) und Incremental Static Regeneration (ISR)
    • Für Funktionen wie RSC und RSF ist ein bestimmtes Framework nötig, etwa Next.js
  • Je nach Projektanforderung ist eine passende Auswahl nötig
    • Einfache Client-App → React allein ist möglich
    • Serverseitige Funktionen erforderlich → Frameworks wie Next.js, TanStack Start oder React Router nötig

Intensiverer Wettbewerb bei React-Frameworks

  • Next.js ist weiterhin das populärste Framework
  • TanStack Start und React Router haben gute Chancen, 2025 als Wettbewerber aufzusteigen
    • TanStack Start → neues Framework auf Basis von TanStack Router
    • React Router → aus Remix weiterentwickelt und stärker in Richtung Framework ausgebaut
  • Beide Frameworks sollen RSC und RSF unterstützen

Full-Stack React

  • Durch die Einführung serverzentrierter Funktionen entwickelt sich React zu einer Full-Stack-Anwendung weiter
    • Datenbankzugriff über RSC und RSF möglich
    • Backend-Infrastruktur wie Authentifizierung, Berechtigungen und Caching erforderlich
    • Auch die Kommunikation zwischen Client und Server wird vereinfacht
  • Die Möglichkeiten zum Aufbau von AI-basierten React-Anwendungen nehmen zu

Die "Shadcnifizierung" von React

  • Shadcn UI → etabliert sich ähnlich wie Tailwind CSS als grundlegende UI-Bibliothek für React
    • Bietet vorgefertigt gestylte Komponenten
    • Anpassbar an eigene Anforderungen
  • Es könnten neue UI-Ansätze entstehen
    • Derzeit wirken viele Projekte optisch sehr ähnlich

React und AI

  • Mehr AI-basierte Generierung von React-Code
    • AI-Tools (wie v0) erzeugen React-Code automatisch
  • Mehr Entwicklung von AI-gestützten Anwendungen
    • Unterstützung durch die AI SDK von Vercel, LangChain usw.

Biome (ehemals Rome)

  • Löst Integrationsprobleme zwischen ESLint und Prettier
  • Schnelles und konsistentes Tool auf Rust-Basis
    • Gewinner des Prettier-Preisgelds von $20,000 (2023)
  • Biome → hat gute Chancen, sich als React-Toolchain der nächsten Generation zu etablieren

React Compiler

  • React Compiler → Tool zur Automatisierung der Performance-Optimierung
    • Übernimmt useCallback, useMemo und memo automatisch
    • Keine manuelle Memoisierung mehr nötig
    • In React 19 als Beta verfügbar

Verwandte Beiträge