Jenseits von Next.js: Erkundung alternativer React Server-Komponenten-Frameworks

Wie sieht der aktuelle Deal mit React Server Components (RSC) aus?

Als das React-Team Ende 2020 das „Zero-Bundle-Size React Server Components“-Konzept vorstellte, hatten und haben viele Menschen Schwierigkeiten, es zu verstehen. Keines der vorhandenen Frameworks unterstützte das neue Konzept und die Prototypen boten keine brauchbare Basis für die Erstellung realer Anwendungen.

Jetzt, mehr als 4 Jahre später, befindet sich die erforderliche Version von React immer noch in der Betaphase und ist nicht für die Produktion freigegeben, und das einzige große und bekannte Framework, das sie unterstützt, besteht aus ehemaligen React-Teammitgliedern. Dies ist eine sehr traurige Situation für die wenigen Entwickler, die versucht haben, alternative Frameworks auf Basis von RSC anzubieten.

Warum sollte ich RSC brauchen?

Das normale React ist eine Bibliothek, die sich ausschließlich auf die Bereitstellung einer schnellen deklarativen Lösung zum Erstellen von Anwendungen im Browser konzentriert. Anwendungen im Browser benötigen immer einen Server, um ihren Status abzurufen und zu speichern. Basierend auf dieser Tatsache wurde eine große Anzahl von Lösungen entwickelt und existiert im React-Client-Ökosystem. Als immer mehr Menschen begannen, ihr Backend mit Typescript zu erstellen, kam es zu einer Renaissance von RPC mit typisierten Schnittstellen, die die API-Endpunkte im Hintergrund erstellten.

Wenn man RSC mit diesen Anforderungen betrachtet, wird schnell klar, dass all dies im Rahmen der RSCs liegt, da sie Folgendes bieten:

• typisierte Serveraktionen, die typisierte Werte und Versprechen zurückgeben können
• einzelne Serveranforderung, um Daten auf dem Server zu ändern und die clientseitige Benutzeroberfläche zu aktualisieren
• Rendern Sie Komponenten auf dem Server und streamen Sie nur einen serialisierten Renderbaum an den Client, der Out-of-Order-Rendering unterstützt

Dadurch können Anwendungsentwickler React verwenden, um alle Komponenten zu definieren, die React verwenden, unabhängig davon, ob sie auf dem Client oder auf dem Server gerendert werden. Diese integrierte Umgebung reduziert die Komplexität moderner Apps und beseitigt die Redundanz duplizierter Geschäftslogik im Backend und Frontend.

Welche Frameworks unterstützen RSC?

Da es sich bei der React-Bibliothek noch um eine offizielle Beta-Phase handelt, sollte keine davon als produktionsbereit angesehen werden:

• Next.js v15
• Waku
• React-Server
• RedwoodJS v9 – noch in der Entwicklung

Derzeit ist nur Next.js einigermaßen für die Produktion verwendbar. Ihre Version 15 ist die 4. Iteration auf RSC, die Ende 2021 mit Version 12 begann.

Über das aufgeführte Framework hinaus finden Sie hier einige weitere Repositories mit Blaupausen zum Aufbau eines RSC-Frameworks – nutzen Sie diese, wenn Sie mehr über die Interna erfahren möchten:

• Vinxi
• Zweifach
• Kotekan
• r19

Wenn Sie von weiteren Frameworks wissen, geben Sie bitte in den Kommentaren Links zu diesen an.

Was macht die Implementierung von RSC in Frameworks schwierig?

Das Transkribieren und Bündeln, basierend auf den großartigen vorhandenen Bundlern einer React-Client-App, ist einfach. Dafür gibt es mehrere Möglichkeiten und eine der am häufigsten verwendeten ist die Verwendung von ViteJs als Entwicklungsserver und Bundler. Frameworks, die einen JavaScript-Frontend- und Backend-Stack bereitstellten, mussten dennoch ihre eigene Lösung für die Handhabung von Typoskript und Bündelung in der Entwicklung und für die Produktion bereitstellen.

Mit RSC muss ein Bundler mindestens drei Transkriptions- und Bündelungspipelines verarbeiten:

1. Browser-Client
2. SSR-Server
3. RSC Component Renderer und Sterilisations-API
4. optionale Middleware

Bis zur Veröffentlichung von Vite Version 6 war hierfür eine Menge spezieller Code erforderlich, um eine funktionierende Lösung bereitzustellen. Next.js wechselt in Version 15 einfach zu Turbopack, um die Verzögerungen zu beheben, die aufgrund der Komplexität und der Verwendung von Webpack entstanden sind, das nie für die Bewältigung dieser Art von Problemen entwickelt wurde.
Die neuen Funktionen von Vite 6 richten sich an viele Framework-Autoren und bieten mit ihrer neuen Umgebungs-API eine großartige Lösung.

Aufgrund der Tatsache, dass Komponenten jetzt in völlig unterschiedlichen Umgebungen gerendert werden, muss jede Reaktionsbibliothek erstellt werden, um die Einschränkungen jeder dieser Umgebungen durch die Bereitstellung alternativer Inhalte zu bewältigen. Derzeit können die meisten Bibliotheken das Rendern auf dem Server bewältigen, um SSR-Inhalte zu erstellen, bei denen viele browserspezifische APIs fehlen. Das Rendern von RSC-Komponenten bringt eine zusätzliche Einschränkung mit einer anderen React-Server-Bibliothek mit sich, die beispielsweise React-Kontext- und State-and-Break-Bibliotheken nicht unterstützt, die dies benötigen, um allen untergeordneten Komponenten ein Design zu bieten. Und Bibliotheken benötigen eine ordnungsgemäße Exportoption in packets.json und ESM-Modulen für die Bibliothek und alle zugehörigen Unterbibliotheken.

Das zweite Teil, das von der React-Bibliothek für RSC nicht bereitgestellt wird, ist der Router. Ohne einen Router, der das Client- und Server-Routing übernimmt, weiß die Reaktionsserverkomponente nicht, welchen Status sie auf dem Server rendern soll. Aus diesem Grund verfügt jedes Framework über eine eigene Implementierung eines Routers und bis die API dafür standardisiert ist, müssen die für ein Framework entwickelten Server- und Client-Komponenten geändert werden, um mit einem anderen Framework zu funktionieren.

Alle Voraussetzungen für ein echtes RSC-Framework

• React Server-Komponenten
  • Serverkomponenten ohne Server
  • Serverkomponenten mit einem Server
  • Asynchrone Komponenten mit Serverkomponenten
• Serveraktionen
  • Erstellen einer Serveraktion aus einer Serverkomponente
  • Serveraktionen aus Clientkomponenten importieren
  • Serveraktionen mit Aktionen zusammenstellen
  • Aktionen mit Serveraktionen bilden
  • Serveraktionen mit useActionState
  • Progressive Erweiterung mit useActionState
  • Einzelne Anfrage an den Server mit aktualisierten Daten für die Benutzeroberfläche in der Antwort
• Richtlinien
  • Mit „Client verwenden“ können Sie markieren, welcher Code auf dem Client ausgeführt wird.
  • „Server verwenden“ markiert serverseitige Funktionen, die vom clientseitigen Code aufgerufen werden können.
• Bündelung für alle drei Ziele in DEV und PROD
• Clientseitige Routing-API
• serverseitige Routing-API

Weitere Details zu React Server-Komponenten finden Sie in der offiziellen React-Dokumentation.

Optionale Anforderungen für Meta-Frameworks:

• Serverseitiges Rendering (SSR)
• Statische Site-Generierung (SSG)
• Verschachtelte Layouts
• Streaming
• Dateisystem-Router
• keine React-API-Endpunkte
• Middleware
• Mehrere Bereitstellungsziele
• Unterstützung für Edge-Runtimes (AWS Lambda@Edge, Cloudflare)

Next.js – warum nach alternativen Optionen suchen?

Warum sollte ich angesichts der Tatsache, dass Next.js 15 das am weitesten verbreitete RSC-Framework ist, nach alternativen Frameworks suchen?

Die Gründe hierfür basieren immer auf dem zu erreichenden Ziel, aber ich werde versuchen, einige Gründe aufzulisten, warum es sinnvoll ist, einen Blick auf die anderen Optionen zu werfen:

1. Next.js ist ein komplexes Framework, das versucht, viele verschiedene Anwendungsfälle abzudecken, die für das jeweilige Projekt möglicherweise nicht relevant sind
2. Aufgrund der Komplexität und Nutzung aller bereitgestellten Funktionen wird die Bereitstellung in anderen Cloud-Umgebungen als Vercel nicht offiziell unterstützt und erfordert einen enormen Aufwand, um mit den Änderungen dieser Hosting-Anforderungen bei jeder Neben- und Hauptversion Schritt zu halten.
3. Bis Version 15, die den Bundler auf Turbopack umstellt, war die Entwicklungserfahrung langsam und schleppend

Bitte beachten Sie, dass sich dieser Artikel nur auf Alternativen konzentriert, die RSC bereitstellen. Es gibt jedoch noch viele weitere Frameworks, die nahezu ähnliche Funktionen wie RSC bieten und viel bessere Alternativen als die in diesem Artikel aufgeführten RSC-Frameworks sein könnten.

Waku – Das minimale React Framework

Entwickelt von Daishi Kato:

Waku (wah-ku) oder わく bedeutet auf Japanisch „Rahmen“. Als minimales React-Framework ist es darauf ausgelegt, die Arbeit von Entwicklern in Startups und Agenturen zu beschleunigen, die kleine bis mittlere React-Projekte erstellen. Dazu gehören Marketing-Websites, leichter E-Commerce und Webanwendungen.

Wir empfehlen andere Frameworks für umfangreiche E-Commerce- oder Unternehmensanwendungen. Waku ist eine leichte Alternative, die ein unterhaltsames Entwicklererlebnis in die Ära der Serverkomponenten bringt. Ja, lasst uns die React-Entwicklung wieder zum Spaß machen!

Das Starten eines neuen Projekts mit Waku ist einfach und Sie erhalten eine Startervorlage, die mit Rückenwind eingerichtet wird:
npm create waku@latest

Alle Grundanforderungen werden abgedeckt mit Ausnahme der Rückgabe von Updates für clientseitige Komponenten in einer einzigen Anfrage bei Verwendung mutierender Serveraktionen. Derzeit erfordern alle Servermutationen eine Aktualisierung des Client-Routers mit router.reload() in der Client-Komponente, was zu einer zweiten Anfrage an den Server führt, die aktualisierten Daten als RSC-Stream zu laden.

Die folgenden optionalen Anforderungen befinden sich noch in der Entwicklung:

• Verschachtelte Dateisystemrouten
• keine React-API-Endpunkte

Unterstützt viele Bereitstellungsziele: Vercel, Netlify, Cloudflare, PartyKit, Deno, AWS Lambda, NodeJS

Aufgrund der Komplexität der Bündelung müssen Sie damit rechnen, dass bei vielen Bibliotheken von Drittanbietern Probleme auftreten:
https://github.com/dai-shi/waku/issues/423

@lazarv/react-server – Der einfachste Weg, React-Apps mit serverseitigem Rendering zu erstellen

Entwickelt von Viktor Lázár:

Ich habe @lazarv/react-server erstellt, weil ich React Server-Komponenten und Serveraktionen mit Vite verwenden wollte ❤️. Für die meisten kleinen Apps war Next.js zu viel, zu schwer und langsam. Ich wollte die gleiche Erfahrung machen, als würde man eine einfache JavaScript-Datei mit node.js ausführen. Dieser Rahmen versucht, so weit wie möglich nicht meinungsgebunden zu sein. Sie können möglicherweise alles erreichen, was Sie wollen. Die einzige Einschränkung besteht darin, dass eine eigene React-Version verwendet wird. Sie müssen React nicht einmal in Ihrem Projekt installieren. Es ist alles im Rahmen enthalten. Ich hoffe, dass Ihnen die Verwendung dieses Frameworks genauso viel Freude bereiten wird wie mir, es zu erstellen und es auch zum Erstellen dieser Dokumentation zu verwenden. - Lazarv

Mit diesem Framework ist das Erlernen von React-Server-Komponenten ein Kinderspiel! Eine einzelne Datei mit einer gültigen React-Server-Komponente und die Ausführung des Befehls ist alles, was Sie brauchen:

./App.jsx

export default function App() {
  return <h1>Hello, World!</h1>
}

npx @lazarv/react-server ./App.jsx

Im Tutorial-Bereich finden Sie eine gute Dokumentation zu den ersten Schritten und einige Beispielprojekte.

Alle Grundanforderungen werden abgedeckt mit Ausnahme der Rückgabe von Updates für clientseitige Komponenten in einer einzigen Anfragebei Verwendung mutierender Serveraktionen.

Da die Laufzeit von NodeJS-APIs abhängt, können andere Laufzeiten, z. (AWS Lambda@Edge, Cloudflare) werden derzeit nicht unterstützt.

Zusätzlich gibt es folgende Funktion:

• Zugriff auf HTTP-Kontext in Serverkomponenten und -aktionen
• Zwischenspeicherung aller Serverdaten und Serverantworten mit erneuter Validierung basierend auf Schlüssel-Ord-Tags
• Fehlerbehandlung
• Teilweises Vor-Rendering – Teile einer JSX-Seite als statische Shell definieren
• NodeJS-Cluster-Modus
• Mikro-Frontends – teilen Sie Ihre Anwendung in kleinere, besser verwaltbare Teile auf. Verwenden Sie die RemoteComponent-Komponente, um ein Mikro-Frontend von einer Remote-URL zu laden und es mithilfe serverseitigem Rendering in Ihrer Anwendung zu rendern

Bereitstellungsziele: NodeJS, Vercel – Adapter in Entwicklung: Netlify, Cloudflare, sst

Unterstützt sofort einsatzbereites Tailwind CSS, TanStack Query, Mantine UI, Material UI.

RedwoodJS – Das Single-Dev-Framework, das einfach funktioniert

Bereitgestellt von Tom Preston-Werner:

Redwood ist das Full-Stack-JavaScript-Anwendungsframework.
Batterien, Backend, React, Konventionen und Meinungen inklusive.

Noch in der Entwicklung und funktioniert nur mit Node v20 und Yarn 4:

export default function App() {
  return <h1>Hello, World!</h1>
}

Dann müssen Sie einige experimentelle Funktionen aktivieren:

npx @lazarv/react-server ./App.jsx

Zuletzt zubereiten und servieren:

npx -y create-redwood-app@canary -y ~/rsc_app
cd ~/rsc_app

Als Teil des Befehls setup-rsc wird eine Barebone-RSC-App für Sie erstellt, die das Rendern einer Clientkomponente innerhalb einer Serverkomponente demonstriert

Bereitstellungsziele: Vercel, Netlify, Render, GCP oder AWS über Coherence, AWS über Flightcontrol, NodeJS

Vergleich: Next.js vs. Alternativen

	Next.js	WAKU	React-server	RedwoodJS
DEV-Environment / Bundling	Turbopack	Vite 5	Vite 6	Vite
Rendering	SSR, ISR, SSG, CSR	SSR, SSG, CSR	SSR, SSG, CSR, Micro-Frontends	SSR, SSG, CSR
Caching Layers	Yes	No	Yes	??
Deployment Target	Vercel, NodeJS	Vercel, Netlify, Cloudflare, Deno, AWS Lambda, PartyKit, NodeJS	Vercel, NodeJS, sst (AWS Lambda)	Vercel, Netlify, AWS, NodeJS
Community	Very Big	Tiny	Just Starting	Small
Open Source Financing	Vercel	Donations	Donations	Privately Funded by a Rich Guy

Abschluss

Zusammenfassung der wichtigsten Erkenntnisse:

• RSC bietet ein leistungsstarkes Paradigma für die moderne Webentwicklung.
• Next.js ist ausgezeichnet, aber nicht die einzige Wahl.
• Alternativen bieten vielfältige Funktionen für unterschiedliche Anforderungen, vermissen jedoch die Mutations-UI-Updates mit nur einer Anforderung.
• Bibliotheken im React-Ökosystem sind immer noch nicht bereit, RSC zu übernehmen

Probieren Sie Frameworks aus, um die beste Lösung für Ihr Projekt zu finden.

Das obige ist der detaillierte Inhalt vonJenseits von Next.js: Erkundung alternativer React Server-Komponenten-Frameworks. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!