Trotz der Herausforderungen des vergangenen Jahres, insbesondere der bahnbrechenden Verlagerung von React auf den Server mit React Server Components, zeichnen sich neue Trends ab, die die Aufmerksamkeit aller Entwickler:innen verdienen. Mit dabei sind unter anderem Astro, tRPC, TanStack und mehr.

Astro (mit React)

Letztes Jahr trat Astro [1] die Nachfolge von Gatsby [2] an. Das neue Webframework ist vor allem für statische Websites bekannt, aber aufgrund seiner wachsenden Popularität haben die Entwickler:innen von Astro auch begonnen, Webanwendungen und API-Endpunkte zu erkunden. Astro eignet sich hervorragend für hochperformante Websites und wird nun auch für Anwendungsfälle in Betracht gezogen, die über seine ursprüngliche Idee hinausgehen.

Mit Astro erstellte Websites sind standardmäßig performant, da sie ohne JavaScript initiiert werden und das aufwendige Rendering auf den Server verlagern. Die Standardeinstellung ist die statische Websitegenerierung (SSG), optional kann aber das serverseitige Rendering (SSR) aktiviert werden.

Astro ist nicht zwingend an React gebunden. Man kann das Open-Source-Framework ohne ein UI-Framework verwenden, indem man seinen eigenen Code in einer .astro-Datei implementiert. Außerdem erlaubt Astro, dass man sein bevorzugtes Komponentenframework (z. B. React) einsetzt. So können alle Entwickler:innen ein vertrautes Werkzeug wählen, um technisch und funktional hochwertige UI-Komponenten zu erstellen.

Wenn Astro mit einem Komponentenframework wie React verwendet wird, kommt es ohne JavaScript aus und liefert nur HTML und CSS an den Browser. Nur wenn Komponenten interaktiv werden, wird das notwendige JavaScript vom Server an den Client geliefert. Diese Vorgehensweise basiert auf der „Fast-by-default-Performance“-Philosophie von Astro, die auf dem Rendering-Paradigma „Island Architecture“ [3] beruht.

Es lohnt sich zweifellos, 2024 mit Astro zu experimentieren. Eine 2023 entstandene Website [4] demonstriert, was möglich ist. Sie liefert perfekte Performance-/SEO-Werte, ein ansprechendes Theme und eine Drop-in-Dokumentation auf der Basis von Astro Starlight [5]. Beim Aufbau einer Webanwendung mit Authentifizierung, API-Endpunkten und servergerenderten Inhalten gibt es jedoch Spielraum nach oben.

Authentifizierung (in React)

Das Thema Authentifizierung in React hat im letzten Jahr nochmals an Fahrt aufgenommen. Mehrere Start-ups und Open-Source-Projekte haben in diesem Bereich aufhorchen lassen. Zu den Standardlösungen Firebase Authentication, Auth0, Passport.js und NextAuth gibt es jetzt kostengünstigere und UI-gesteuerte Alternativen für die Authentifizierung.

Supabase [6] ist eine Open-Source-Alternative zu Firebase von Google. Die Entwicklungsplattform enthält nicht nur einen Service für die Authentifizierung, sondern auch eine PostgreSQL-Datenbank sowie Echtzeitabonnements, Speicher und Serverless-Funktionen. Eine Supabase-Instanz kann entweder selbst gehostet oder als gehosteter (kostenpflichtiger) Service verwendet werden. Viele Entwickler:innen nutzen es nur für die Authentifizierung und wählen andere Dienste (z. B. PlanetScale [7] als Serverless-DB) für die übrigen Anforderungen.

Clerk [8] ist ein weiterer Akteur in diesem Bereich. Das Tool deckt laut Website die komplette Benutzerverwaltung ab und legt dabei den Schwerpunkt auf die Authentifizierung. Mit den Clerk-Drop-in-Komponenten für React kann man sich als Benutzer einer Anwendung unkompliziert registrieren und sich später jederzeit anmelden oder abmelden. Außerdem ist es möglich, Benutzer und ihre Rollen innerhalb einer oder mehrerer Organisationen zu verwalten. Clerk ist eine perfekte Lösung, um ein MVP für ein neues Produkt zu erstellen.

Werfen wir zuletzt einen Blick auf Lucia [9]. Die Auth-Bibliothek wurde in Kombination mit Astro populär, das Tool kann aber auch mit anderen Frameworks verwendet werden. Lucia ist ein Open-Source-Projekt mit einer engagierten Community und einer klaren Trennung zwischen Anwendung und Datenbank. Dadurch können Entwickler:innen Benutzer in einer eigenen Datenbank verwalten. Im Vergleich zu anderen Authentifizierungsdiensten hat das den großen Vorteil, dass die Benutzer nicht beim Anbieter gespeichert werden.

KENNEN SIE SCHON DAS REACT CAMP?

3 Tage intensive React-Weiterbildung in Berlin, München o. online mit Programm Chair Hans-Christian Otto

Mehr Infos zum React Camp

tRPC für Full-Stack-React-Anwendungen

tRPC [10] hat sich im letzten Jahr zu einem Favoriten für typsichere Full-Stack-Anwendungen [11] entwickelt. In einem komplexen Projekt ist es möglich, tRPC (und Prisma [12] als Datenbank-ORM) zu verwenden, um Typsicherheit über Datenbank, Serveranwendung und Clientanwendung hinweg zu gewährleisten.

Wie funktioniert das? Während Prisma die Typen aus Datenbankmodellen für die Backend-Anwendung generiert, sorgt tRPC für Typsicherheit über die API-Schicht für das Frontend. Dank all dieser Einstellungen und der tRPC zugrunde liegenden Natur von Remote Procedure Calls ist es möglich, dass die Clientanwendung das API des Backends aufruft, indem sie unkomplizierte Funktionen ausführt. Unter der Haube verwendet tRPC JSON-RPC [13] als Spezifikation und HTTP als Transportschicht. tRPC ist mit react-query [14] kombinierbar, sodass Anfragen effizient gecacht und gestapelt (batched) werden, wenn es zu mehreren zeitgleichen Anfragen kommt. Hinzu kommen all die anderen Vorteile, die die Verwendung einer Query-Bibliothek bietet. In diesem Zusammenhang lohnt es sich dieses Jahr, darauf zu achten, wie sich die Integration von tRPC in React Server Components weiterentwickeln wird.

React Server Components und Next.js

React Server Components (RSC) wurden 2023 als Spezifikation (einschließlich der zugrunde liegenden Implementierungen) von React veröffentlicht. Mit Next 13.4 wurden RSCs erstmals von der Community genutzt. Die Einführung von RSCs stellt einen Paradigmenwechsel in der Webentwicklung dar, der sowohl Aufregung als auch Herausforderungen mit sich bringt.

RSCs sind unter Umständen eine tiefgreifendere Veränderung als React Hooks, weil sie uns dazu bringen, die Verwendung von React-Komponenten in einer größeren Anwendung zu überdenken und Komponenten auf dem Server zu rendern. In Next.js und seinem neuen App-Router sind RSCs Standard. Immer mehr Frameworks (auch jenseits von React) beschäftigen sich mit der Einführung und Implementierung von Serverkomponenten. Neue kleinere Frameworks wie Waku [15] haben sie bereits implementiert.

Die neue Architektur bietet viele Vorteile. Ein Beispiel hierfür ist, dass RSCs es ermöglichen, Daten auf Komponentenebene aus der Datenbank auf dem Server abzurufen, bevor die Komponente an den Browser gesendet (gestreamt) wird. Dadurch gehören die gefürchteten Waterfall Requests über das Netzwerk vom Client zum Server der Vergangenheit an. Die Verarbeitung erfolgt auf dem Server schneller und führt so zu einer verbesserten Leistung.

Dieser Aspekt von RSCs ist wichtig, weil er zeigt, wie sich das Ökosystem von React anpassen muss. tRPC und react-query werden heutzutage für die Client-Server-Kommunikation verwendet. Daher stellt sich die Frage, welche Rolle sie in einer Welt ohne APIs spielen werden, in der RSCs viele Daten direkt auf dem Server abrufen.

TanStack Router für SPA React

Single Page Applications (SPAs) sind (noch) nicht tot. Das meint Tanner Linsley inmitten des ganzen Hypes um React Server Components. Tanner Linsley ist eine der treibenden Kräfte bei beliebten React-Bibliotheken wie react-query und react-table. Erst kürzlich hat er eine neue Bibliothek veröffentlicht: TanStack Router [16].

TanStack Router kommt zum perfekten Zeitpunkt, um eine wichtige Lücke im React-Ökosystem zu schließen. Viele Entwickler:innen nutzen Metaframeworks wie Next.js und Remix (das den populärsten React-Router [17] verwendet und sich ebenfalls auf die Implementierung von RSCs konzentriert [18]) und übernehmen deren integrierten Router. Allerdings hat bisher noch niemand einen typsicheren Router für React entwickelt.

TypeScript ist in den letzten Jahren zum Industriestandard geworden. Deshalb ist es folgerichtig, dass es einen neuen Router im React-Ökosystem geben muss, der TypeScript unterstützt. Damit können Entwickler:innen beispielsweise URL-Zustände typsicher lesen und schreiben. Es bleibt zu hoffen, dass TanStack Router 2024 andere etablierte Player dazu inspiriert, sich in Richtung eines TS-First-Standards zu entwickeln.

Vercel bringt React an die Edge

Vercel ist das Unternehmen hinter Next.js. Gleichzeitig ist Vercel maßgeblich an der React-Server-Components-Bewegung beteiligt. Da Vercel mehrere Core-Entwickler:innen eingestellt hat, glauben viele, dass Vercel zudem die treibende Kraft hinter React ist. Unabhängig von all diesen Spekulationen ist es großartig, dass jemand die Zügel in die Hand genommen hat, um React weiterzuentwickeln.

Vercel verbessert React nicht nur durch die Entwicklung von React Server Components. Das Unternehmen arbeitet auch an der Art und Weise, wie React-Anwendungen mit Next.js effizient bereitgestellt und an die Nutzer ausgeliefert werden. Eine Next-Anwendung auf Vercel zu hosten, hat den Vorteil, dass React-Komponenten mit deren Edge Runtime gestreamt werden können.

Die Auswirkungen auf die Leistung einer App, die über die Edge Runtime gehostet wird, sind enorm. Das ist möglich, da die Anwendung nicht mehr an einem von den Benutzern entfernten Ort (z. B. US-East) gehostet wird, sondern als Serverless Functions so nah wie möglich beim Benutzer der Anwendung. In Verbindung mit einer Serverless-Datenbank wie PlanetScale, die über Read Replicas auf der ganzen Welt verfügt, wird die Frage, wie (oder besser wo) wir Anwendungen in Zukunft hosten, 2024 von entscheidender Bedeutung sein.

Bundler für React: Turbopack vs. Vite

Turbopack [19] (entwickelt von Vercel und dem Entwicklerteam von webpack) ist der Nachfolger von webpack. Der Bundler ist noch nicht produktionsreif, kann aber für die lokale Entwicklung in Next.js-Anwendungen aktiviert werden. In Turbopack sind die über Jahre gesammelten Erfahrungen mit dem populären JavaScript-Bundler webpack eingeflossen. Während Tree Shaking und Caching zu webpack erst später hinzukamen und somit nicht zu 100 Prozent performant sind, werden sie vom Nachfolger von Anfang an erstklassig unterstützt. Turbopack basiert auf Rust.

Bundler haben schon heute viele unterschiedliche Aufgaben. Es kommen neue Anforderungen hinzu:

• die Verflechtung von Client- und Serverkomponenten (z. B. RSCs) in Entwicklungs- und Produktionsumgebungen,

• das Caching an verschiedenen Einstiegspunkten der Anwendung und

• die Notwendigkeit, über das Abrufen von Daten auf Komponentenebene Bescheid zu wissen.

Die Bundler müssen sich also weiterentwickeln. Aus diesem Grund ist bei Vercel der Bedarf an einer neuen Umsetzung entstanden. Der Einsatz von Vite [20] und seiner serverseitigen Fähigkeiten durch Next.js wären dabei wünschenswert gewesen, um eine Fragmentierung des Ökosystems zu vermeiden. Doch während viele andere Metaframeworks (wie Remix [21]) und Single Page Applications im letzten Jahr auf Vite als Bundler setzten, entschied sich Vercel/Next dagegen und initiierte die Arbeit an Turbopack. Ob wir 2024 sagen können: „Hot Code Replacement mit Turbopack ist unglaublich schnell“, wird sich noch zeigen.

React Forget

Wer ist als React-Entwickler:in nicht frustriert von useCallback, useMemo und memo? Während bei React explizite Angaben nötig sind, um die Performanz zu verbessern, erreichen andere Frameworks das gleiche Ergebnis ohne diese Notwendigkeit. Die gute Nachricht: Das React-Team arbeitet (relativ leise) an einem Compiler namens React Forget [22], der alle Memoisierungen in einer React-Anwendung automatisieren wird. Was bisher ein manueller Prozess der Memoisierung von Funktionen (useCallback), Werten (useMemo) und Komponenten (memo) war, wird in Zukunft hoffentlich wegfallen. Diese Aufgabe wird dann von React selbst übernommen.

Biome

ESLint und Prettier gehören nicht zu den beliebtesten Entwicklungswerkzeugen, wenn es um ihre Einrichtung und vor allem um ihr Zusammenspiel geht. Dennoch sind sie aus dem Alltag der Webentwicklung nicht wegzudenken. Biome [23] (ehemals Rome) will hier eine Alternative anbieten: eine schnelle und ganzheitlich einsetzbare Toolchain-Lösung. Biome erhielt in einem Wettbewerb eine Prämie von 20 000 $ von Prettier [24] für die Entwicklung eines leistungsfähigeren Formatierers in Rust. An verschiedenen Stellen wird diskutiert, die strikte Abhängigkeit von ESLint aufzuheben und Entwickler:innen die Verwendung anderer Linter (z. B. Biome) zu ermöglichen.

Das Projekt hat sich zum Ziel gesetzt, 2024 die einzige Toolchain zu sein, die alles für eine moderne Webanwendung Notwendige auf schnelle Weise bereitstellt.

Headless UI Libraries für React

React-Entwickler wechseln gern ihre bevorzugte UI-Bibliothek. Was vor ein paar Jahren Material UI war, ging über zu Semantic UI/Ant Design, dann Chakra UI, dann Mantine UI und endete 2023 vorerst bei shadcn/UI. Die früheren Vorlieben wurden hauptsächlich durch den Wunsch nach ansprechendem Design und UX beeinflusst. Mit shadcn/UI haben sich einige Dinge geändert.

Als erste populäre UI-Bibliothek nutzt shadcn/UI Tailwind als First-Class-Citizen (neben CSS-Variablen) für das Theming ihrer Komponenten, um ein individuelles Design zu erreichen. Nach dem Vorbild von Tailwind wird shadcn/UI nicht als Node-Paket installiert, sondern per Copy-and-Paste in ein Projekt eingefügt, in dem die Komponenten frei gestaltet werden können.

Der Trend zu Headless-UI-Bibliotheken, die nur die Barebone-Komponente als Skeleton (Funktionalität, Barrierefreiheit, …) ohne Design bereitstellen, wurde nicht von shadcn/UI erfunden. Vielmehr entstand dieser Trend aus dem Wunsch heraus, ein individuelles Design zu schaffen und sich dabei auf eine populäre UI-Bibliothek zu verlassen.

Der Trend, Komponenten auf dem Server zu rendern, um die Leistung und die UX zu verbessern, hat die Verwendung von CSS-in-JS-Lösungen wie Styled Components und Emotion fast zum Erliegen gebracht, da diese die gesamte Last auf den Client/Browser verlagern, indem sie JavaScript aufrufen, um CSS auszugeben.

Welche neuen UI-Bibliotheken und CSS-Paradigmen werden 2024 aus dem oben beschriebenen Trend hervorgehen? Wir haben den Aufstieg von Headless-UI-Bibliotheken (z. B. shadcn/UI) und Utility-First CSS (z. B. Tailwind) gesehen, aber es gibt bereits weitere neue kreative Alternativen am Horizont (z. B. vanilla-extract [25], PandaCSS [26], CVA [27]).

Fazit und Ausblick

Mit einem klaren Fokus auf Leistung wird das Jahr 2024 von UX im Browser geprägt sein. Aufkommende Trends im React-Ökosystem, von innovativen Authentifizierungslösungen über hochwertige Routingoptionen bis hin zu zukunftsweisenden UI-Bibliotheken, zeugen von einer lebendigen und kreativen Entwicklung in der React-Welt. Die vorgestellten Trends werden sich im Laufe des Jahres mit Sicherheit weiterentwickeln und neue Möglichkeiten und Herausforderungen für Entwickler:innen mit sich bringen.