Ein neues React Projekt starten

Du kannst React natürlich auch ohne ein Framework verwenden - und so gehts use React for a part of your page. Wenn du jedoch eine neue Anwendung oder eine Website vollständig mit React erstellen willst, empfehlen wir die Verwendung eines Frameworks.

Hier ist der Grund dafür

Selbst wenn du anfangs vielleicht kein Routing oder Datenfetching benötigst, wirst du wahrscheinlich einige Bibliotheken dafür hinzufügen wollen. Mit jedem neuen Feature, das du in dein React-Projekt einbaust, wächst aber dein JavaScript-Bundle und du könntest dich damit konfrontiert sehen, den Code für jede Route einzeln aufzuteilen. Wenn deine Anforderungen an das Datafetchging komplexer werden, könntest du auf Netzwerk-Wasserfälle zwischen Server und Client stoßen, die deine Anwendung sehr langsam wirken lassen. Wenn in deiner Zielgruppe viele Nutzer mit schlechten Netzwerkbedingungen und schwach ausgestatteten Geräten sind, könntest du gezwungen sein, HTML aus deinen React-Komponenten zu generieren, um Inhalte frühzeitig darzustellen - entweder auf dem Server oder während der Build-Zeit. Es kann sehr knifflig sein, deine Konfiguration so anzupassen, dass ein Teil deines Codes auf dem Server oder während des Build-Prozesses ausgeführt wird.

Dieses Problem ist nicht spezifisch für React. Deshalb gibt es SvelteKit für Svelte, Nuxt für Vue uns so weiter. Um diese Probleme selbst zu lösen, musst du deinen Bundler mit deinem Router und deiner Datenfetching-Bibliothek integrieren. Es ist zwar nicht schwer, eine erste Konfiguration zum Laufen zu bringen, aber es gibt viele Feinheiten, die man beachten mus, damit die Anwendung auch schnell bleibt wenn sie mit der Zeit größer wird. Du wirst den minimalen Umfang an Anwendungs-Code senden wollen, aber das in einem einzigen Client-Server-Roundtrip und s parallel zu jeglichen anderen Daten die für die Seite benötigt werden. Du möchtest wahrscheinlich, dass deine Seite bereits interaktiv ist bevor dein JavaScript Code überhaupt ausgeführt wird, um stufenweise Verbesserung zu unterstützen. Du möchtest vielleicht einen Ordner mit vollständig statischen HTML-Dateien für deine Marketingseiten generieren, die überall gehostet werden können und auch bei deaktiviertem JavaScript noch funktionieren. All diese Funktionalitäten selbst zu erstellen bedeutet echte Arbeit.

Die auf dieser Seite erwähnten React Frameworks lösen solche Probleme standardmäßig, ohne das man selbst noch etwas tun muss. Sie ermöglichen es, sehr einfach anzufangen und anschliessend die Anwendung gemäß den Anforderungen zu skalieren. Jedes der Frameworks hat eine Community, dadurch ist es einfach, Antworten auf Fragen zu finden und Tools zu aktualisieren. Frameworks geben dem Code ausseredem eine Struktur, die dir und anderen helfen den Kontext und die Fähigkeiten zwischen verschiedneen Projekten zu behalten. Im Gegensatz dazu kann man mit einer benutzerdefinierten Einrichtung leicht bei nicht unterstützten Abhängigkeitsversionen hängen bleiben, und man endet im Grunde damit, sein eigenes Framework zu erstellen - allerdings eines ohne Community oder Upgrade-Pfad (und wenn es so ist wie die, die wir in der Vergangenheit erstellt haben, eher planlos gestaltet)

Wenn du immer noch nicht überzeugt bist oder deine App ungewöhnliche Einschränkungen aufweist, die von diesen Frameworks nicht gut abgedeckt werden, und du dein eigenes benutzerdefiniertes Setup implementieren möchtest, können wir dich nicht davon abhalten – leg los! Hol dir react und react-dom von npm, setze deinen eigenen individuellen Build-Prozess mit einem Bundler wie Vite oder Parcel auf, und füge nach Bedarf weitere Tools für Routing, statische Generierung oder serverseitiges Rendering und mehr hinzu.

Next.js’s App Router Bundler implementiert vollständig die offizielle React Server Komponenten Spezifikation. Auf diese Weise kannst du Build-Time-, Server-Only- und interaktive Komponenten in einem einzigen React-Baum kombinieren.

Beispielsweise kannst du eine reine Server-Komponente als async Funktion schreiben, die aus einer Datenbank oder einer Datei liest und die Daten anschliessend an eine interaktive Komponente weitergeben

// Diese Komponente wird *nur* auf dem Server ausgeführt (oder während der Build-Zeit)
async function Talks({ confId }) {
  // 1. Du bist auf dem Server, dadurch kannst du mit der Datenebene kommunizieren. Ein API Endpunkt ist nicht erforderlich
  const talks = await db.Talks.findAll({ confId });

  // 2. Füge eine beliebige Menge von rendering Logik hinzu. Dadurch wird dein JavaScipt bundle nicht größer
  const videos = talks.map(talk => talk.video);

  // 3. Reiche die Daten an die Komponente weiter die im Browser ausgeführt wird
  return <SearchableVideoList videos={videos} />;
}

Next.js’s App Router also integrates data fetching with Suspense. This lets you specify a loading state (like a skeleton placeholder) for different parts of your user interface directly in your React tree:

<Suspense fallback={<TalksLoading />}>
  <Talks confId={conf.id} />
</Suspense>

Server Components and Suspense are React features rather than Next.js features. However, adopting them at the framework level requires buy-in and non-trivial implementation work. At the moment, the Next.js App Router is the most complete implementation. The React team is working with bundler developers to make these features easier to implement in the next generation of frameworks.