Wann man ein React-Framework wie Next oder Gatsby vs. Create React App verwenden sollte [closed]

Ich bin in einer Art Rapid-Prototyping-Phase meiner React/Javascript-Lernerfahrung. Ich habe mich gefragt, wann die Leute nach einem Framework wie Next.js oder Gatsby.js im Vergleich zur standardmäßigen Create React App greifen würden.

Ich mag die seitenbasierte Strukturierung und die Möglichkeit, Links von Next.js vorab zu laden. Ich bin mir jedoch nicht sicher, wann Sie im Gegensatz zu CRA nach Next greifen oder sogar CRA auswerfen würden.

Vielen Dank!

Ich bin im selben Boot. Ich habe mit CRA angefangen, um ein SPA zu schaffen, das für den Anfang großartig war und die Lernkurve überstanden hat. Aber ich erkannte bald zwei wichtige Probleme:

1. Teilen in sozialen Netzwerken: Ich konnte die OGP-Tags pro Route nicht ändern. Der Effekt davon ist, dass nur Ihre Basisroute (korrekt eingerichtet mit OGP-Tags), wenn sie in einem sozialen Netzwerk geteilt wird, die Karte (Twitter-Begriff) erzeugen kann, jede andere Route, die Sie teilen, wird grundsätzlich als leer angezeigt. Das gilt auch für Facebook und LinkedIn. Siehe hier.
2. Suchmaschinenoptimierung: Obwohl es nur wenige Artikel über Suchmaschinen gibt, die Ihre SPA korrekt für die Indexierung crawlen können, war dies meiner Erfahrung nach nicht zufriedenstellend. Denn zB bei Google ist mir aufgefallen, dass nur die Startseite indexiert und nicht korrekt geparst wird. Separate Titel von separaten Elementen werden miteinander verkettet. Bing scheint es nicht indiziert zu haben. Möglicherweise wurde es von Google indiziert, weil ich die Startseite mit der Search Console von Google indiziert habe. Es ist keine praktikable Lösung, wenn ich für jede neue Seite oder nach einer Aktualisierung einer Seite manuell neu indizieren muss.

Create-React-App : Ein wirklich gutes Bootstrapper-Tool für den Einstieg in die Erstellung eines SPA.

Gatsby/React-Static : Ähnlich wie Create-React-App, erzeugt aber stattdessen HTML-Build-Ausgaben, also “Pre-Rendering”. Damit muss ich noch experimentieren. Ich hoffe, dass dies (1) und (2) lösen würde, da ich jetzt verschiedene OGP-Tags bereits im HTML haben kann, das von einem statischen Site-Server (S3/Azure Blobs/Github-Seiten) bereitgestellt wird, anstatt sie danach lokal zu ändern bringen. Ich bin mir noch nicht sicher, ob das funktionieren wird. Der zusätzliche Vorteil hier ist, dass der Benutzer eine bessere Leistung erfährt, da Gatsby bereits während der Erstellungszeit vorgerendert wird. (Möglicherweise kann jemand, der Erfahrung mit Gatsby hat, dies klären, oder ich werde diese Antwort bearbeiten, nachdem ich fertig bin.) Update (19.02.2018): Ich kann bestätigen, dass (1) von Gatsby.js gelöst wird, während es noch als Static gehostet wird Webseite.

Next.js : Wenn Gatsby (1) und (2) nicht löst, wird Next.js mein Fallback sein, um eine vollständige SSR-App zu erstellen. Das Problem hier ist, dass ich jetzt PaaS verwenden muss, um die Site zu hosten (z. B. Azure Web Apps oder AWS ElasticBeanStalk oder Heroku) anstelle eines statischen Site-Hosting-Service (Azure Blob, AWS S3, Github Pages). Dies ist etwas kostspieliger und erfordert etwas mehr Arbeit beim Einrichten von CI/CD-Pipelines.

Siehe auch diese Alternativen in den Dokumenten von CRA aufgeführt.

Ich habe kürzlich selbst viel zu diesem Thema recherchiert, insbesondere zu create-react-app vs. Gatsby.js, und ich habe herausgefunden, dass Sie mit beiden Tools sofort Reaktionscode schreiben können, ohne sich zu viele Gedanken über die Einrichtung machen zu müssen. Allerdings bietet beispielsweise Gatsby darüber hinaus serverseitiges Rendering zur Build-Zeit, was für SEO entscheidend ist. Sie benötigen keinen Server, um Ihre Ansichten zu rendern, was bei Next.js der Fall ist, da sie bereits zur Erstellungszeit erstellt werden. Wenn ein Benutzer Ihre Website besucht, wird zuerst die HTML-Version geladen und sobald das Javascript geladen ist, wird Ihre Website zu einer voll funktionsfähigen React-Web-App.

Das Gute ist, dass sie alle dieselbe Ansichtsebene teilen, sodass Sie von einem Werkzeug zum anderen wechseln können. Du kannst nachschauen Umzug von create-react-app zu Gatsby.js was ins Detail geht.

Ich mache diese Forschung selbst. Mein Verständnis ist, dass Next.js serverseitiges Rendering standardmäßig bereitstellt. Create React App tut dies nicht, also müssen Sie Ihre eigene Lösung für SSR bereitstellen (für Dinge wie schnelleres Laden von Seiten und SEO).

create-react-app eignet sich am besten für die Erstellung von Websites und mobilen Apps (native React-Apps), da viele Lernkurven verfügbar sind. Die anderen beiden sind die React Frameworks (wir können sagen).

Verwenden Sie Gatsby für Single-Page-Websites, die schneller und einfacher bereitzustellen sind. Verwenden Sie Next.js, während Sie mit REST-APIs arbeiten (glaube ich …)

Es liegt an dir. Ein guter Entwickler findet immer seinen Weg für eine einfache und schnelle Arbeit.