Retour d’expérience sur le framework NuxtJs

Qu’est-ce que NuxtJs

NuxtJs est un framework gratuit et Open Source basé sur VueJs et NodeJS. Il est très apprécié par les développeurs pour sa flexibilité et son architecture modulable.

NuxtJs permet une simplification et une accélération du développement mais aussi une optimisation des applications.

Le framework Js est surtout connu pour le développement d’applications dites “universelles” ou encore « isomorphes ». Le code a la particularité de pouvoir tout aussi bien être exécuté côté serveur que côté client.

Les avantages du développement avec NuxtJs

Développer avec le framework NuxtJs apporte plusieurs avantages. Le premier que l’on peut citer est celui de l’apprentissage. En effet, étant basé sur VueJs et NodeJs, le framework utilise des technologies JavaScript déjà connues. Il n’y a donc pas besoin pour les développeurs d’apprendre un nouveau langage de programmation.

De plus, NuxtJs permet de développer des applications qui peuvent s’exécuter côté client comme côté serveur avec le même code grâce au plugin SSR (Server Side Rendered). Les développeurs ont donc moins de code à gérer et à mettre à jour, le débogage se fait plus simplement.

Contrairement à VueJs, NuxtJs est auto-configuré et prêt à l’emploi. Bien sûr, ces configurations par défaut sont totalement modifiables mais, elles permettent tout de même de commencer un projet avec une base sans avoir à se préoccuper de ces réglages qui peuvent s’avérer fastidieux.

Enfin, avec NuxtJs le système des routes est entièrement automatisé, ainsi lorsque vous ajoutez, modifiez ou supprimez une page, cela se met automatiquement à jour dans votre fichier routes. Pour cela, il vous suffira de créer votre page VueJs et de la placer à la racine de NuxtJs, dans le dossier nommé “pages”. NuxtJs sera capable d’extraire le nom de cette nouvelle page et de la générer dans le fichier de configuration du routeur.

3 modes de rendu proposés par NuxtJs

NuxtJs propose 3 modes de rendu différents : le mode SPA, universel et statique.

Le mode SPA

Le mode SPA (Single Page Application ou en français application web monopage) proposé par NuxtJs permet de créer des monopages qui seront exécutés uniquement du côté client. Les pages n’existent pas sur le CDN, elles sont chargées directement dans le navigateur de l’utilisateur. Avec ce mode, il n’y a donc pas besoin d’utiliser de serveur.

Le mode universel

Le mode universel proposé par le framework NuxtJs est aussi appelé le rendu côté serveur. Il permet aux développeurs de créer une page entière côté serveur pour ensuite l’envoyer côté client déjà prête. L’avantage avec ce mode est qu’il permet aux robots d’indexation de lire les métadonnées et donc d’indexer correctement la page. Cela entraîne aussi un temps de chargement des pages beaucoup plus rapide, améliorant ainsi l’expérience utilisateur.

Le mode statique

Grâce au mode statique et à la commande “nuxt generate”, NuxtJs va, au moment du build, générer le fichier des routes sous forme d’un code HTML. L’avantage avec ce mode est que le site web peut être déployé sur n’importe quel hébergeur web sans avoir besoin d’un serveur pour être exécuté. En effet, tout le code est généré dans des fichiers HTML et JavaScript y compris les appels aux API.

Le retour d’expérience d’un développeur NuxtJs

Grégory est développeur front-end depuis 3 ans, il travaille principalement avec les technologies VueJs et NuxtJs. Nous l’avons interrogé afin d’avoir son retour d’expérience sur le framework NuxtJs.

Pour introduire le framework Js dans les grandes lignes, il parle d’un outil permettant d’allier le meilleur des deux mondes que sont le SSR (Server Side Rendering) et le CSR (Client Side Rendering). NuxtJs c’est les bons côtés de la majeure partie des mauvais côtés de VueJs.

Grégory utilise NuxtJs depuis maintenant 2 ans. Il a trouvé la courbe d’apprentissage du framework Js extrêmement facile car la documentation est abondante et très claire. De plus, le framework javascript dispose d’une grande communauté active sur Discord. Grégory indique même que lorsqu’il est bloqué et qu’il pose sa question sur le canal NuxtJs, il reçoit une réponse dans les 15 minutes qui suivent, lui permettant de se débloquer rapidement.

Concernant les difficultés rencontrées au quotidien par le développeur, il indique les plugins créés par la communauté dont l’intégration peut parfois se révéler difficile. Selon les plugins déjà utilisés au sein du projet, l’intégration peut être incompatible. Il précise donc de toujours bien se renseigner avant d’utiliser ces plugins.

D’une manière générale, Grégory est très satisfait du développement sous NuxtJs, il conseille à tous les développeurs voulant se former sur ce framework d’avoir de bonnes bases avec VueJs afin de pouvoir différencier exactement ce que gère NuxtJs de VueJs. Mais surtout, il faut être capable d’utiliser tous les raccourcis qui facilitent la vie d’un développeur, en comprenant ce qui se passe derrière ceux-ci afin d’éviter certaines problématiques, certains bugs.

Si votre projet a besoin du référencement mais que vous voulez garder la souplesse du CSR et du SSR, qu’il soit en interne ou public mais que vous souhaitez bénéficier de la vitesse de rendu, vous pouvez privilégier VueJs et son framework NuxtJs.

Si cet article vous a plu, nous vous invitons à lire notre article dédié à VueJs, ou à consulter notre blog pour voir nos derniers articles.