Pourquoi ai-je choisi Next.js plutôt que Gatsby, Gridsome ou Nuxt?

Lorsque nous choisissons un cadre pour un nouveau projet Web, nous avons généralement tendance à nous en tenir aux outils avec lesquels nous sommes familiers, indépendamment de leur adéquation avec le projet. J'essaye de faire exactement le contraire. Chaque fois que l'occasion se présente, j'essaie de nouvelles technologies. Qu'ai-je appris après ces expériences? Pourquoi est-ce que je me retrouve avec Next.js comme outil standard de générateur de site statique (SSG)? Dans cet article, je parlerai de la façon dont j'ai expérimenté différentes technologies Web. Il s'agit de trouver un outil adapté au sein du Jamstack, comment choisir exactement ce qui convient au développeur et s'intègre bien dans son projet, pourquoi j'ai choisi Next.js.

À propos de mon expérience en développement Web

J'ai commencé mon parcours dans le développement web avec PHP et MySQL, puis, quand j'étais à l'université, je suis passé à la plateforme .NET. J'ai aimé la sécurité des types, le modèle MVC, les capacités de débogage de code. C'était comme ça, j'ai continué à utiliser .NET à l'avenir, en faisant de la programmation et du conseil. Mais je passais progressivement à JavaScript, et en particulier aux premières versions d'Angular.



Il y a environ deux ans, je suis passé presque entièrement à Jamstack. J'ai décidé de regarder de plus près Vue.js , car il ressemblait à l'outil JavaScript le plus convivial du marché. J'ai fait mon site web personnelen utilisant Nuxt.js. C'est un générateur de site statique qui est maintenant appelé un framework intuitif pour développer des applications Vue.js. Lorsque j'ai terminé ce projet, la première version de Gatsby , un système de création de sites statiques basé sur React , est sortie . J'ai utilisé Gatsby sur mon prochain projet pour créer le site Web Kentico Advantage , un projet simple visant à soutenir les agences Web. C'était ma première expérience avec React. Et ce que j'ai rencontré alors, je ne l'ai vraiment pas aimé. De très grosses difficultés surgissaient même là où il fallait faire une bagatelle.



Mon développement suivant était mon propre site de mariage. Ensuite , j'ai donné Gatsby et RÉAGIR une autre chance, mais à la fin, seulement quelques jours plus tard, je suis passé à l' Gridsome cadre pour Vue.js. À l'époque, ce générateur de site statique gagnait rapidement en popularité. Je l'ai rencontré littéralement à chaque coin de rue. Grâce à ce SSG, j'ai pu créer un site Web de travail simple en trois heures. J'étais juste fasciné. Vue.js a un peu plus grandi à mes yeux.



Puis le projet Sourcebit est apparu . C'est un plugin utilisé pour combiner diverses sources de données et SSG, qui se charge de transformer les données et de les rendre plus faciles à utiliser. Cela étant dit, le seul générateur de site statique basé sur JavaScript pris en charge par Sourcebit était Next.js... Par conséquent, après avoir appris les bases, j'ai utilisé Next.js dans un autre projet.

Choix d'outils en fonction de votre propre expérience ou de celle de quelqu'un d'autre

Ci-dessus, j'ai mentionné les outils que j'ai le plus utilisés au cours des deux dernières années. Mais, si vous les comparez, alors, comme cela arrive souvent, parmi eux, il ne sera pas possible de choisir celui qui peut être mis en premier sans hésitation.



Disons que vous êtes un développeur chargé de choisir le bon outillage pour votre prochain projet. Le moment du début des travaux sur le projet peut dépendre de celui que vous choisissez, il est donc peu probable que vous puissiez vous permettre de longues expérimentations avec plusieurs de ces outils.



Vous pouvez choisir des outils en fonction de votre propre expérience et de l'expérience des autres. Si vous avez déjà travaillé avec Angular, vous pouvez décider de commencer par examiner les outils qui utilisent Angular. Si vous avez travaillé pour la dernière fois avec Angular il y a longtemps, vérifiez avec vos collègues ce qu'ils utilisent. Certes, dans une telle situation, je n'ai interrogé personne sur quoi que ce soit, mais j'ai immédiatement choisi Vue.js. Le problème était que tous mes collègues avaient déjà travaillé avec React. Par conséquent, à la fin, je devais à moi-même, en utilisant Google, résoudre les problèmes émergents.



Un autre facteur influençant le choix d'un cadre est la taille du projet. Si vous créez un site personnel en testant des outils dessus, les questions qui se posent dans votre travail seront simples. Les réponses à ces questions se trouvent généralement dans la documentation de l'outil sélectionné. Mais disons que vous développez un projet d'entreprise. Ils utilisent des builds partiels, certaines parties du projet sont rendues sur le serveur, il utilise de nombreuses sources de données. Si, au cours du travail, vous rencontrez des difficultés, il ne sera pas possible de les résoudre à l'aide de la documentation.Vous devrez rechercher des réponses en posant des questions à des collègues ou sur quelque chose comme Stack Overflow.



Ci-dessus, j'ai mentionné trois outils JavaScript. Mais Jamstack n'est pas toujours JavaScript. Peut-être que PHP ou Ruby est plus proche de vous. Pour trouver le générateur de site statique qui vous convient, consultez le tableau suivant.





Je ne peux rien dire sur les plates-formes avec lesquelles je n'ai pas encore essayé de travailler. Mais je peux partager mes idées concernant Vue.js, React et les générateurs de sites statiques associés.

Vue.js: comparaison de Gridsome et Nuxt.js

Le framework Vue.js est connu et réputé pour son excellente documentation. Gridsome suit le même chemin. La documentation de ce SSG est très bien écrite. Il a tout ce à quoi tous ceux qui commencent avec le Gridsome peuvent s'attendre. Vrai. Quand j'ai lu cette documentation, il m'a semblé que ses auteurs lisaient dans mes pensées. Gridsome utilise GraphQL. Par conséquent, les sources de données doivent être connectées au site à l'aide de plugins spéciaux. Gridsome associe automatiquement les modèles de données aux modèles avec les noms correspondants et organise le routage. Pour les débutants, c'est un gros plus. Gridsome autorise les ressources JavaScript externes. Je sais que cela ne ressemble pas à une "meilleure pratique", mais par exemple, si vous téléchargez un modèle à partir d'un site comme HTML5UP.net, un tel modèle contiendra une certaine quantité de code JS. Quand j'ai eu besoin de quelque chose comme ça dans Nuxt.js, j'ai rencontré des difficultés. En conséquence, j'ai dû réécrire la fonctionnalité correspondante dans Vue.



Pour résumer mon expérience d'utilisation de Gridsome, je peux dire que c'était facile pour moi de travailler. Le cadre m'a aidé à réaliser ce dont j'avais besoin, je n'avais pas à combattre les obstacles que cette plateforme me mettrait. Gridsome vous permet d'accéder à un site Web fonctionnel simple en quelques heures seulement.



Lorsque vous travaillez avec Nuxt, le plus difficile était de comprendre les spécificités du travail avec le magasin de données Vuex et de créer Vuex.store... Ces référentiels sont utilisés dans les projets Nuxt.js. Si un composant doit travailler avec des données, vous devez alors partir du fait que toutes les données sont stockées au même endroit. Vous pouvez bien sûr stocker des données au niveau des composants, mais il arrive souvent que différents composants utilisent les mêmes données. Par conséquent, pour éviter la duplication de code, vous devez utiliser un seul magasin de données. Pour implémenter un tel stockage, vous n'avez pas besoin de plugins spéciaux qui collectent les données nécessaires quelque part. Bien que j'aie, par exemple, utilisé un plugin conçu pour fonctionner avec un CMS sans l' interface utilisateur Kentico Kontent . Cela m'a définitivement facilité la vie, mais j'aurais tout aussi bien pu utiliser l' API Fetch avec le SDK de livraison.... Après que tout a fonctionné pour moi, j'ai réalisé que j'aimais ce modèle. Il est fiable et flexible. Moi, pour travailler sur de grands projets, je la choisirais. Pour l'utiliser, il suffit, au tout début, de passer du temps à le connaître.



Nuxt.js prend en charge à la fois le rendu côté serveur et le mode de prévisualisation. Une grande communauté s'est formée autour de lui. Tout cela nous permet de dire que Nuxt.js est un projet plus mature que Gridsome, et que Nuxt.js est mieux adapté aux sites sérieux.



Résumons les informations sur Gridsome et Nuxt.js en énumérant leurs forces (marquées d'un "+") et leurs faiblesses (marquées d'un "-") dans le tableau suivant.

React: Gatsby Next.js

Commençons par Gatsby. Je pense que la fonctionnalité la plus intéressante de ce framework est représentée par un outil de travail avec GraphQL appelé GraphiQL . Gatsby utilise GraphQL. Et GraphiQL vous permet de travailler avec les données utilisées sur le site. Je ne saurais trop insister sur l’importance et l’utilité de cet outil. Cela évite au développeur d'avoir à lire la documentation de la source de données utilisée. GraphiQL vous permet de visualiser les données de manière interactive. À partir des données, vous pouvez choisir ce que vous voulez. Il en résulte des requêtes GraphQL générées automatiquement qui sont copiées dans les composants.





Travailler avec GraphiQL



Utiliser GraphQL dans Gatsby, c'est aussi chercher des pluginspour les sources de données applicables. Certes, ces plugins sont disponibles pour tous les principaux CMS sans interface utilisateur. Un autre point fort de Gatsby est qu'un grand nombre de plugins ont été créés pour ce framework. Il existe des plugins pour littéralement toutes les occasions - du référencement au chargement progressif d'images, en passant par l'exportation d'un schéma GraphQL.



Mais lorsque vous travaillez avec Next.js, il manque des outils standard pour travailler avec des données. En conséquence, le développeur doit passer du temps à essayer de déterminer exactement ce qu'il doit utiliser dans chaque situation spécifique. Par exemple, lors de la résolution de problèmes similaires, je me suis inspiré de ce référentiel et j'ai utilisé le modèle "Repository". Si vous pouvez vivre sans GraphQL, Next.js vous donnera tout ce que Gatsby peut vous offrir, et plus encore.





Routage dans Next.js



Next.js utilise un modèle de routage basé sur des fichiers. Cela facilite la recherche de pages et de modèles, même dans des situations où vous devez travailler avec un projet inconnu. Ce framework vous permet de combiner des pages statiques et des pages générées dynamiquement. Ces deux mécanismes de création de pages peuvent même être combinés en une seule page. Cela facilite grandement la mise en œuvre de la fonctionnalité de prévisualisation des matériaux. Gatsby et Next.js savent comment créer des builds incrémentiels. Mais dans le cas de Gatsby, vous devez héberger le site sur le Gatsby Cloud , et cela n'est possible qu'avec des plugins préparés avec des exigences particulières.



En comparant Next.js et Gatsby, on peut noter que Next.js génère des lots de versions plus petits. Si nous parlons de trouver des documents de référence et d'obtenir des réponses aux questions des membres de la communauté, alors, comme la pratique l'a montré, Gatsby et Next.js se ressemblent presque à cet égard.



Résumons les avantages et les inconvénients de Gatsby et Next.js.

Autres considérations à considérer lors du choix d'une plateforme

Au moment de décider quel outil utiliser pour les projets Web, nous pensons souvent comme ceci: "La documentation est bonne, beaucoup de gens en parlent sur Twitter, des versions sont souvent publiées, il existe de nombreux plugins." Cela se termine généralement par un tel raisonnement. Si vous pensez que vous allez utiliser une plateforme pendant longtemps, si vous pensez qu'elle peut être utilisée dans plusieurs projets ou même devenir un outil officiel dans toute votre entreprise, vous devez également vous poser les questions suivantes:

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

Quand il s'agit de choisir des frameworks Web, j'ai tendance à utiliser Vue.js chaque fois que possible. Il me semble que ce framework, sans trop interférer avec ses paramètres standards, permet de créer rapidement et facilement ce dont j'ai besoin. J'utilise généralement Vue.js partout où j'ai besoin d' éléments personnalisés et de composants de sites Web traditionnels nécessitant des fonctionnalités dynamiques. Je construis de petits sites dans Vue.js. Et, comme je n'utilise pas Vue.js pour les grands projets, j'ai tendance à utiliser Gridsome.



Pour des projets plus importants et plus sérieux, j'utilise la bibliothèque React. Chez Kentico, presque tout le développement front-end est basé sur React. L'entreprise envisage d'aller dans cette direction à l'avenir. Par conséquent, il est logique que je fasse de même. Si nous parlons de choisir un générateur de site statique, j'utilise maintenant Next.js et Gatsby, mais je suis plus enclin au premier d'entre eux. Pour moi, la plus grande fonctionnalité de ce framework est le routage basé sur des fichiers, qui prend également en charge les routes dynamiques. J'aime aussi la compatibilité avec Sourcebit, qui permettra, si nécessaire, de changer les sources de données ou les SSG sans tout réécrire à partir de zéro.



Quels générateurs de sites statiques utilisez-vous?