it-swarm.com.de

Wann Sie ein Reaktives Framework wie Next oder Gatsby vs. Create React App verwenden

Ich bin in der Art von 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 Standard-App "Create React" greifen würden.

Ich grabe wirklich die seitenbasierte Strukturierung und den Prospekt für das Laden von Links von Next.js. Ich bin mir jedoch nicht sicher, wann Sie nach Next greifen würden, wenn Sie CRA beantragen oder sogar CRA auswerfen.

Vielen Dank!

37
Vince Picone

Ich bin im selben Boot. Ich habe mit CRA angefangen, ein SPA zu erstellen, das zu Beginn großartig war und die Lernkurve überwunden hat. Ich erkannte jedoch bald zwei wichtige Probleme:

  1. Freigabe in sozialen Netzwerken: Ich konnte die OGP-Tags nicht pro Route ändern. Dies hat zur Folge, dass nur Ihre Basisroute (korrekt eingerichtet mit OGP-Tags) die Karte (Twitter-Begriff) für ein soziales Netzwerk freigeben kann. Jede andere Route, die Sie freigeben, wird im Wesentlichen als leer angezeigt. Dies gilt auch für Facebook und LinkedIn. Siehe hier .
  2. Suchmaschinenoptimierung: Obwohl es wenige Artikel über Suchmaschinen gab, die in der Lage sind, Ihr SPA für die Indizierung korrekt zu crawlen, war es meiner Erfahrung nach nicht zufriedenstellend. Für z. Bei Google habe ich festgestellt, dass nur die Homepage indiziert und nicht korrekt analysiert wird. Separate Titel von separaten Elementen werden miteinander verkettet. Bing scheint es nicht indiziert zu haben. Möglicherweise ist Google indiziert, weil ich die Startseite mit der Google Search Console von Google indiziert habe. Dies ist keine praktikable Lösung, wenn ich für jede neue Seite oder nach einem Update einer Seite manuell neu indexieren muss.

Create-React-App: Ein wirklich gutes Bootstrapper-Tool, um mit dem Erstellen eines SPA zu beginnen.

Gatsby/React-Static: Ähnlich wie Create-React-App, erzeugt aber HTML-Build-Ausgabe und "Pre-Rendering". Ich muss noch damit experimentieren. Ich hoffe, dass dies (1) und (2) auflösen würde, da ich jetzt verschiedene OGP-Tags im HTML-Code haben kann, die von einem statischen Standortserver (S3/Azure Blobs/Github Pages) bereitgestellt werden, anstatt dass sie lokal nach dem geändert werden holen. Ich bin mir nicht sicher, ob das noch funktionieren wird. Der zusätzliche Vorteil besteht darin, dass der Benutzer eine bessere Leistung erlebt, da Gatsby bereits während der Erstellungszeit vorrendert. (Möglicherweise kann jemand mit Gatsby-Erfahrung etwas klären, oder ich werde diese Antwort bearbeiten, wenn ich fertig bin.) Update (19.02.2014): Ich kann bestätigen, dass (1) von Gatsby.js gelöst wird, während es immer noch als statisch gehostet wird Webseite.

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

Siehe auch diese Alternativen in den Dokumenten der CRA.

15
dparkar

Ich habe kürzlich selbst viel zu diesem Thema recherchiert, insbesondere Create-React-App vs. Gatsby.js, und ich habe herausgefunden, dass Sie mit beiden Tools sofort Code schreiben können, ohne sich zu sehr um das Setup zu kümmern. Allerdings bietet Gatsby beispielsweise auch serverseitiges Rendering zur Erstellungszeit an, was für SEO entscheidend ist. Sie benötigen keinen Server, um Ihre Ansichten zu rendern. Dies ist bei Next.js der Fall, da sie bereits zur Erstellungszeit erstellt werden. Wenn ein Benutzer Ihre Website besucht, wird zuerst die HTML-Version geladen. Sobald das Javascript geladen ist, wird Ihre Website zu einer voll funktionsfähigen Web-App.

Die gute Sache ist, dass sie alle dieselbe Ansichtsebene haben, sodass Sie von einem Werkzeug zum anderen wechseln können. Sie können bewegen, indem Sie von create -react-app zu Gatsby.js wechseln, was in die Details geht.

6
Khaled Garbaya

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

verwenden Sie Gatsby, um die Website für eine einzelne Seite schneller und einfacher bereitzustellen Verwenden Sie Next.js, während Sie mit REST - APIs arbeiten.

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

0
user10743059

Ich forsche diese Forschung selbst. Ich verstehe, dass Next.js Server-Side-Rendering aus der Box bereitstellt. Create React App macht dies nicht. Daher müssen Sie eine eigene Lösung für SSR bereitstellen (z. B. schnelleres Laden von Seiten und SEO).

0
typeoneerror