Warum habe ich Next.js gegenüber Gatsby, Gridsome oder Nuxt gewählt?

Wenn wir ein Framework für ein neues Webprojekt auswählen, bleiben wir normalerweise bei den Tools, mit denen wir vertraut sind, unabhängig davon, wie gut sie für das Projekt passen. Ich versuche genau das Gegenteil zu tun. Wann immer sich die Gelegenheit ergibt, probiere ich neue Technologien aus. Was habe ich nach diesen Experimenten gelernt? Warum habe ich Next.js als Standard-SSG-Tool (Static Site Generator)? In diesem Beitrag werde ich darüber sprechen, wie ich mit verschiedenen Webtechnologien experimentiert habe. Es geht darum, ein geeignetes Tool im Jamstack zu finden, genau zu wählen, was für den Entwickler richtig ist und sich gut in sein Projekt zu integrieren. Warum habe ich mich für Next.js entschieden?

Über meine Erfahrung in der Webentwicklung

Ich begann meine Reise in die Webentwicklung mit PHP und MySQL und wechselte dann, als ich an der Universität war, zur .NET-Plattform. Ich mochte Typensicherheit, MVC-Modell und Code-Debugging-Funktionen. So war es, ich habe .NET auch in Zukunft weiter verwendet und programmiert und beraten. Aber ich wechselte allmählich zu JavaScript und insbesondere zu frühen Versionen von Angular.



Vor ungefähr zwei Jahren bin ich fast vollständig zu Jamstack gewechselt. Ich habe mich entschlossen, Vue.js genauer anzusehen , da es wie das freundlichste JavaScript-Tool da draußen aussah. Ich habe meine persönliche Website erstelltmit Nuxt.js. Es ist ein statischer Site-Generator, der jetzt als intuitives Framework für die Entwicklung von Vue.js-Anwendungen bezeichnet wird. Als ich dieses Projekt abgeschlossen hatte, erschien die erste Version von Gatsby , einem System zum Erstellen statischer Sites auf der Basis von React . Ich habe Gatsby bei meinem nächsten Projekt verwendet, um die Kentico Advantage- Website zu erstellen , ein einfaches Projekt zur Unterstützung von Webagenturen. Dies war meine erste Erfahrung mit React. Und was mir damals begegnet ist, hat mir wirklich nicht gefallen. Sehr große Schwierigkeiten traten auf, selbst wenn es notwendig war, eine Kleinigkeit zu tun.



Meine nächste Entwicklung war meine eigene Hochzeitsseite. Dann gab ich Gatsby und React eine weitere Chance, aber am Ende, nur ein paar Tage später, wechselte ich zum Gridsome- Framework für Vue.js. Zu dieser Zeit gewann dieser statische Site-Generator schnell an Popularität. Ich bin ihm buchstäblich an jeder Ecke begegnet. Dank dieser SSG konnte ich in drei Stunden eine einfach funktionierende Website erstellen. Ich war einfach fasziniert. Vue.js ist in meinen Augen etwas mehr gewachsen.



Dann kam das Sourcebit- Projekt . Es ist ein Plugin zum Kombinieren verschiedener Datenquellen und SSG, das für die Transformation der Daten und die Vereinfachung der Verwendung verantwortlich ist. Der einzige von Sourcebit unterstützte JavaScript-basierte statische Site-Generator war Next.js... Nachdem ich die Grundlagen gelernt hatte, verwendete ich Next.js in einem anderen Projekt.

Auswahl der Tools basierend auf Ihrer eigenen Erfahrung oder der Erfahrung eines anderen

Oben habe ich die Tools erwähnt, die ich in den letzten Jahren am häufigsten verwendet habe. Wenn Sie sie jedoch vergleichen, ist es, wie so oft, nicht möglich, diejenige auszuwählen, die ohne zu zögern an erster Stelle stehen kann.



Angenommen, Sie sind ein Entwickler, der für die Auswahl der richtigen Werkzeuge für Ihr nächstes Projekt verantwortlich ist. Der Zeitpunkt des Beginns der Arbeit an dem Projekt hängt möglicherweise davon ab, welches Sie auswählen. Daher ist es unwahrscheinlich, dass Sie sich lange Experimente mit vielen dieser Tools leisten können.



Sie können Tools basierend auf Ihrer eigenen Erfahrung und der Erfahrung anderer Personen auswählen. Wenn Sie bereits mit Angular gearbeitet haben, sollten Sie sich zunächst die Tools ansehen, die Angular verwenden. Wenn Sie vor langer Zeit zuletzt mit Angular gearbeitet haben, erkundigen Sie sich bei Ihren Kollegen, was sie verwenden. In einer solchen Situation habe ich zwar niemanden nach irgendetwas gefragt, sondern mich sofort für Vue.js entschieden. Das Problem war, dass alle meine Kollegen zuvor mit React gearbeitet hatten. Daher musste ich am Ende selbst Google verwenden, um die aufkommenden Probleme zu lösen.



Ein weiterer Faktor, der die Wahl eines Frameworks beeinflusst, ist die Größe des Projekts. Wenn Sie eine persönliche Website erstellen, indem Sie Tools darauf testen, sind die Fragen, die sich bei Ihrer Arbeit stellen, einfach. Die Antworten darauf finden Sie normalerweise in der Dokumentation zum ausgewählten Tool. Angenommen, Sie entwickeln ein Unternehmensprojekt. Sie verwenden teilweise Builds, einige Teile des Projekts werden auf dem Server gerendert, es werden viele Datenquellen verwendet. Wenn Sie im Laufe der Arbeit Schwierigkeiten haben, können Sie diese mithilfe der Dokumentation nicht bewältigen. Sie müssen nach Antworten suchen, indem Sie Fragen an Kollegen stellen oder etwas wie Stapelüberlauf.



Ich habe oben drei JavaScript-Tools erwähnt. Jamstack ist jedoch nicht immer JavaScript. Vielleicht ist PHP oder Ruby näher bei Ihnen. In der folgenden Tabelle finden Sie den für Sie geeigneten statischen Site-Generator.





Ich kann nichts über Plattformen sagen, mit denen ich noch nicht gearbeitet habe. Aber ich kann meine Ideen zu Vue.js, React und verwandten statischen Site-Generatoren teilen.

Vue.js: Vergleich von Gridsome und Nuxt.js

Das Vue.js-Framework ist bekannt und bekannt für seine hervorragende Dokumentation. Gridsome folgt demselben Weg. Die Dokumentation zu dieser SSG ist sehr gut geschrieben. Es hat alles, was jeder erwarten kann, der mit dem Gridsome beginnt. Wahr. Als ich diese Dokumentation las, schien es mir, dass die Autoren meine Gedanken lasen. Gridsome verwendet GraphQL. Daher müssen Datenquellen mit speziellen Plugins mit der Site verbunden werden. Gridsome ordnet Datenmodelle automatisch Vorlagen mit entsprechenden Namen zu und organisiert das Routing. Für Anfänger ist dies ein großes Plus. Gridsome ermöglicht externe JavaScript-Ressourcen. Ich weiß, es klingt nicht nach "Best Practice", aber zum Beispiel, wenn Sie eine Vorlage von einer Site wie HTML5UP.net herunterladenEine solche Vorlage enthält eine gewisse Menge an JS-Code. Als ich so etwas in Nuxt.js brauchte, stieß ich auf Schwierigkeiten. Am Ende musste ich die entsprechende Funktionalität in Vue neu schreiben.



Zusammenfassend kann ich sagen, dass es mir leicht gefallen ist, mit Gridsome zu arbeiten. Das Framework hat mir geholfen, das zu erreichen, was ich brauchte. Ich musste nicht die Hindernisse bekämpfen, die diese Plattform mir stellen würde. Mit Gridsome gelangen Sie in wenigen Stunden zu einer einfach funktionierenden Website.



Bei der Arbeit mit Nuxt war es am schwierigsten, die Besonderheiten der Arbeit mit dem Vuex-Datenspeicher zu verstehen und Vuex.store zu erstellen... Diese Repositorys werden in Nuxt.js Projekten verwendet. Wenn eine Komponente mit Daten arbeiten muss, müssen Sie davon ausgehen, dass alle Daten an einem Ort gespeichert sind. Sie können natürlich Daten auf Komponentenebene speichern, aber es kommt häufig vor, dass verschiedene Komponenten dieselben Daten verwenden. Um eine Duplizierung des Codes zu vermeiden, müssen Sie daher einen einzelnen Datenspeicher verwenden. Um einen solchen Speicher zu implementieren, benötigen Sie keine speziellen Plugins, die die erforderlichen Daten von irgendwoher sammeln. Obwohl ich zum Beispiel ein Plugin verwendet habe, das für die Arbeit mit CMS ohne die Kentico Kontent-Benutzeroberfläche entwickelt wurde . Es hat mir definitiv das Leben leichter gemacht, aber ich hätte genauso gut die Fetch-API mit dem Delivery SDK verwenden können.... Nachdem alles für mich funktioniert hatte, wurde mir klar, dass ich dieses Muster mag. Es ist zuverlässig und flexibel. Ich würde es für die Arbeit an großen Projekten wählen. Um es zu benutzen, müssen Sie am Anfang nur einige Zeit damit verbringen, es kennenzulernen.



Nuxt.js unterstützt sowohl das serverseitige Rendern als auch den Vorschaumodus. Um ihn herum hat sich eine große Gemeinschaft gebildet. All dies erlaubt uns zu sagen, dass Nuxt.js ein ausgereifteres Projekt als Gridsome ist und dass Nuxt.js besser für ernsthafte Websites geeignet ist.



Fassen wir die Informationen zu Gridsome und Nuxt.js zusammen, indem wir ihre Stärken (mit "+" gekennzeichnet) und Schwächen (mit "-" gekennzeichnet) in der folgenden Tabelle auflisten.

React: Gatsby Next.js

Beginnen wir mit Gatsby. Ich glaube, dass das interessanteste Merkmal dieses Frameworks ein Tool für die Arbeit mit GraphQL namens GraphiQL ist . Gatsby verwendet GraphQL. Mit GraphiQL können Sie mit den auf der Site verwendeten Daten arbeiten. Ich kann die Wichtigkeit und Nützlichkeit dieses Werkzeugs nicht genug betonen. Dies erspart dem Entwickler das Lesen der Dokumentation für die verwendete Datenquelle. Mit GraphiQL können Sie Daten interaktiv anzeigen. Aus den Daten können Sie auswählen, was Sie möchten. Dies führt zu automatisch generierten GraphQL-Abfragen, die in Komponenten kopiert werden.





Arbeiten mit GraphiQL



Wenn Sie GraphQL in Gatsby verwenden, müssen Sie auch nach Plugins suchenfür anwendbare Datenquellen. Richtig, solche Plugins sind für alle gängigen CMS ohne Benutzeroberfläche verfügbar. Eine weitere Stärke von Gatsby ist, dass eine große Anzahl von Plugins für dieses Framework erstellt wurden. Es gibt Plugins für buchstäblich alle Gelegenheiten - von SEO über das fortschreitende Laden von Bildern bis hin zum Exportieren eines GraphQL-Schemas.



Bei der Arbeit mit Next.js fehlen jedoch Standardwerkzeuge für die Arbeit mit Daten. Infolgedessen muss der Entwickler Zeit damit verbringen, genau herauszufinden, was in der jeweiligen Situation zu verwenden ist. Bei der Lösung ähnlicher Probleme habe ich mich beispielsweise von diesem Repository inspirieren lassen und das Muster "Repository" verwendet. Wenn Sie ohne GraphQL leben können, bietet Ihnen Next.js alles, was Gatsby Ihnen bieten kann, und noch mehr.





Routing in Next.js



Next.js verwendet ein dateibasiertes Routing-Modell . Dies macht es sehr einfach, Seiten und Vorlagen zu finden, selbst wenn Sie mit einem unbekannten Projekt arbeiten müssen. Mit diesem Framework können Siestatische Seiten und dynamisch generierte Seiten kombinieren . Diese beiden Mechanismen zur Seitenerstellung können sogar zu einer Seite kombiniert werden. Dies erleichtert die Implementierung derMaterialvorschau Funktionalität. Sowohl Gatsby als auch Next.js wissen, wie inkrementelle Builds erstellt werden. Im Fall von Gatsby müssen Sie die Site jedoch in der Gatsby Cloud hosten.Dies ist nur mit Plugins möglich,die mit speziellen Anforderungen erstellt wurden.



Beim Vergleich von Next.js und Gatsby kann festgestellt werden, dass Next.js kleinere Release-Bundles generiert. Wenn wir darüber sprechen, Referenzmaterialien zu finden und Antworten auf Fragen von Community-Mitgliedern zu erhalten, sehen Gatsby und Next.js in dieser Hinsicht, wie die Praxis gezeigt hat, fast gleich aus.



Fassen wir die Daten zu den Vor- und Nachteilen von Gatsby und Next.js zusammen.

Weitere Überlegungen bei der Auswahl einer Plattform

Bei der Entscheidung, welches Tool für Webprojekte verwendet werden soll, denken wir oft so: "Die Dokumentation ist gut, viele Leute sprechen auf Twitter darüber, Veröffentlichungen werden häufig veröffentlicht, es gibt viele Plugins." Es endet normalerweise mit solchen Überlegungen. Wenn Sie der Meinung sind, dass Sie eine Plattform lange genug nutzen werden, wenn Sie der Meinung sind, dass sie in mehreren Projekten verwendet werden kann oder sogar ein offizielles Tool in Ihrem Unternehmen wird, sollten Sie auch die folgenden Fragen stellen:

• , ?
• ?
• ?
• , , - ?
• ?
• - ?

Wenn es um die Auswahl von Webframeworks geht, verwende ich nach Möglichkeit Vue.js. Es scheint mir, dass Sie mit diesem Framework ohne große Beeinträchtigung der Standardeinstellungen schnell und einfach das erstellen können, was ich benötige. Normalerweise verwende ich Vue.js überall dort, wo ich benutzerdefinierte Elemente und herkömmliche Website- Komponenten benötige, die dynamische Funktionen benötigen. Ich baue kleine Websites in Vue.js. Und da ich Vue.js nicht für große Projekte verwende, verwende ich eher Gridsome.



Für größere und ernstere Projekte verwende ich die React-Bibliothek. Bei Kentico basiert fast die gesamte Front-End-Entwicklung auf React. Das Unternehmen plant, in Zukunft in diese Richtung zu gehen. Daher ist es für mich logisch, dasselbe zu tun. Wenn wir über die Auswahl eines statischen Site-Generators sprechen, verwende ich jetzt sowohl Next.js als auch Gatsby, aber ich bin eher zum ersten geneigt. Für mich ist das größte Merkmal dieses Frameworks das dateibasierte Routing, das auch dynamische Routen unterstützt. Ich mag auch die Kompatibilität mit Sourcebit, die es bei Bedarf ermöglicht, Datenquellen oder SSGs zu ändern, ohne alles von Grund auf neu zu schreiben.



Welche statischen Site-Generatoren verwenden Sie?