Wir veröffentlichen eine neue Übersetzung für angehende React-Entwickler. Wir hoffen, dieser Artikel hilft Ihnen bei der Auswahl des richtigen Tools für Ihr nächstes Projekt.
Wenn es darum geht, neue Projekte in React zu erstellen, haben wir eine offensichtliche Wahl: NextJS oder Create-React-App. Gatsby wird aufgrund langsamer Builds beim Skalieren größtenteils nicht verwendet. Darüber hinaus wird NextJS zu einem zunehmend praktischen statischen Site-Generator.
Foto von Artyom Sapegin auf Unsplash
In diesem Artikel werden die Vor- und Nachteile von NextJS und Create-React-App erläutert und die jeweils geeigneten Anwendungsfälle erläutert.
Create-React-App
Create-React-App ist eine Reihe von Tools, mit denen Sie neue React-Anwendungen erstellen können. Die CRA speichert Abhängigkeiten wie Webpack und Babel in Reaktionsskripten. Die Create-React-App erleichtert die Arbeit mit Transpilern und Bundlern.
Dies bedeutet, dass das Aktualisieren dieser "versteckten" Abhängigkeiten überhaupt nicht schwierig ist. Sie müssen auf eine neue Version der Reaktionsskripte warten und diese aktualisieren. Wir müssen nicht mit der Behebung von Änderungen an der Webpack-Konfiguration herumspielen.
Vorteile der Create-React-App
Unopinionated
Jede Bibliothek kann verwendet werden, es gibt keine Regeln oder Richtlinien. Die Wahl der Bibliothek für das Routing liegt ebenfalls in Ihrem Ermessen.
Create-React-Apps werden auf der Clientseite gerendert
Da wir Create-React-Apps auf der Clientseite rendern, ist die Bereitstellung einfach. Wir können die Anwendung auf jedem Datei-Hosting hosten, beispielsweise auf S3. CSR-Anwendungen sind viel einfacher zu bearbeiten!
Nachteile der Create-React-App
Schwierig anzupassen
Es gibt keine integrierte Möglichkeit, die Anwendung anzupassen. Wenn Sie Ihre Webpack-Konfiguration anpassen müssen, können Sie nur ein Drittanbieter-Tool wie craco oder eject verwenden . Nach dem Ausführen des Befehls eject verlieren Sie jedoch fast alle Vorteile der Verwendung der Create-React-App.
Es abstrahiert die Komplexität von
Create-React-App funktioniert so lange, bis Sie etwas tun müssen, das es nicht unterstützt. Es wird hart sein! Durch das Ausblenden der Babel- und Webpack-Konfiguration erleichtert Create-React-App den Einstieg. Dies verhindert jedoch, dass Entwickler mehr über die Funktionsweise dieser wichtigen Tools erfahren.
Beeinträchtigt SEO
Da wir Create-React-Apps clientseitig rendern, ist die Implementierung von SEO schwierig. Create-React-Apps sollten nicht für E-Commerce- oder Marketingzwecke verwendet werden.
NextJS
Es ist nicht ganz richtig, NextJS und Create-React-App zu vergleichen, weil NextJS so viel mehr ist. Während CRA ein Tool für Gerüstreaktionsanwendungen ist, ist NextJS ein Framework für deren Erstellung. NextJS bietet sofort serverseitiges Rendering, statische Site-Erstellung, serverlose Funktionen und vieles mehr. Dies ist eine ganze Reihe von Tools, die uns alles bieten, was wir zum Erstellen effektiver Webanwendungen benötigen.
Möchten Sie mit NextJS noch weiter gehen? Probieren Sie HappyKit aus .
HappyKit bietet NextJS-Anwendungen repetitive Aufgaben (CRON-Aufgaben), sehr einfache Analysen und Feature-Flags. Sie können für die Beta anmelden hier !
Vorteile der Verwendung von NextJS
NextJS ist blitzschnell!
Dank serverseitigem Rendering und statischer Site-Generierung werden NextJS-Anwendungen erheblich schneller ausgeführt. Next kümmert sich um die Standardleistungsoptimierungen.
Einfache Bereitstellung
Vercel (das Unternehmen hinter NextJS) erleichtert die Bereitstellung von Full-Stack-React-Anwendungen . Mit ein paar Mausklicks haben Sie eine professionelle Bereitstellungspipeline. Der Prozess umfasst Vorbereitstellungen und Produktionsbereitstellungen.
NextJS bietet Routing
NextJS bietet eine schnelle und einfache Möglichkeit, APIs in Anwendungen zu erstellen. Wenn Ihre Anwendung APIs von Drittanbietern verwendet, benötigen Sie häufig eine eigene API für Proxy-Anforderungen und Token-Speicher. Das NextJS-Routing ist dafür perfekt geeignet.
Einfache Anpassung Mit
NextJS können Sie Ihre Babel- oder Webpack-Konfigurationen anpassen. Das Hinzufügen von Webpack-Ladern oder Babel-Plugins ist einfach!
Nachteile der Verwendung von NextJS
NextJS ist ein Framework mit einer Meinung.
Es gibt nur eine Möglichkeit, mit Routen in NextJS zu arbeiten, und Sie können es nicht anpassen. NextJS ist auf seine dateibasierte Route beschränkt, und dynamische Routen sind nur bei Verwendung eines NodeJS-Servers möglich.
Wann sollten Sie NextJS verwenden?
Beim Erstellen einer Zielseite
eignet sich NextJS hervorragend zum Erstellen einer Zielseite und zum Implementieren anderer Marketingaufgaben.
Wenn SEO
wichtig ist Beim Aufbau von E-Commerce-Websites ist die Suchmaschinenoptimierung wichtiger denn je. Dank des serverseitigen Renderings fällt NextJS auch in dieser Hinsicht auf.
Beim Erstellen von Websites müssen
Server beim serverseitigen Rendern der Anwendung nicht mehr auf ihren Geräten rendern. Für Benutzer langsamerer Geräte kann dies zu schnelleren Startzeiten führen.
Wann sollten Sie Create-React-App verwenden?
Beim Erstellen einer Gated-Anwendung
Wenn Ihre Anwendung nur authentifizierten Benutzern zugänglich ist, verliert sie die meisten Vorteile des serverseitigen Renderns. In diesem Fall funktionieren CSR-Anwendungen einwandfrei, sie sind einfacher und billiger zu hosten.
Beim Erstellen von Webanwendungen
profitieren Webanwendungen im Allgemeinen weniger vom serverseitigen Rendern. In der Regel werden diese Anwendungen von Benutzern wiederverwendet, und wir können Caching anwenden, um ein blitzschnelles Laden ohne die Kosten und den Aufwand von SSR zu ermöglichen.
Wir hoffen, dieser Artikel hat Ihnen bei der Entscheidung geholfen, ob NextJS und Create-React-App für Ihr nächstes Projekt geeignet sind. Beide Tools sind sehr cool zum Erstellen von React-Apps. Sie können keinen Gewinner auswählen: In einigen Fällen ist es besser, NextJS zu verwenden, in anderen die Create-React-App.