Nuxt.js est un framework frontal basé sur Vue.js qui offre d’excellentes fonctionnalités de développement. Notamment le rendu côté serveur, la génération automatique de routes, la gestion améliorée des balises méta et l’amélioration du référencement.

Notre équipe Front-end n’envisageait pas vraiment d’utiliser Nuxt.js comme technologie principale côté client jusqu’à ce que nous débutons un projet unique nécessitant un certain nombre de fonctionnalités très spécifiques. Comme c’était aussi la première fois que certains des membres de notre équipe utilisaient Nuxt.js sur Vue.js, nous avons décidé de partager avec vous notre expérience. En espérant qu’elle vous apportera des éléments de réponse sur son utilité, et les contextes dans lesquels vous pourriez être amené à l’utiliser !

Pourquoi utiliser Nuxt.js plutôt que Vue.js ?

Nuxt.js offre de nombreux avantages aux développeurs front-end. Mais c’est une caractéristique bien précise qui a fait pencher la balance pour ce framework.

L’amélioration du référencement !

Notre application a besoin de cette fonctionnalité car il ne s’agit pas d’un SPA interne typique (application sur une seule page). En l’occurrence, il s’agit d’une application Web publique qui inclut des fonctionnalités de partage social et de management.

Comment utiliser les applications vue.js

En parlant de partage social, Nuxt.js dispose d’une excellente fonctionnalité de gestion des balises méta. Il est donc plus facile de créer des fenêtres de partage social spécifiques et personnalisables en fonction des données reçues du back-end.

Alors, comment fonctionne l’amélioration du référencement ?

Pour améliorer le SEO, Nuxt.js utilise le SSR (Server Side Rendering). Le SSR récupère les données AJAX et traduit les composants Vue.js en chaînes HTML sur le serveur Node.js. Il les envoie directement au navigateur lorsque toute la logique asynchrone est achevée. Puis sert enfin le balisage statique dans une application entièrement interactive sur le client. Cette fonctionnalité permet une excellente analyse des éléments DOM via Google SEO. L’analyseur SEO va, comme son nom l’indique, analyser les éléments DOM à une vitesse imbattable dès que le DOM du site Web sera chargé.

D’autre part, les applications SPA typiques construites avec des frameworks tels que Vue.js, React, Angular et consorts récupèrent les données du backend via AJAX après le chargement de DOM. Donc l’analyseur SEOn’est pas en mesure d’analyser tous les éléments DOM, car ils n’ont pas encore été traduits. La récupération AJAX est asynchrone, contrairement à l’analyse SEO.

Nuxt.js nécessite un mindest différent que celui de Vue

Nuxt.js et Vue.js ont deux logiques très différentes. La principale différence est que Vue s’exécute toujours côté client, contrairement à Nuxt, ce qui peut entraîner des problèmes majeurs dans certains cas.

Par exemple, si vous souhaitez sélectionner un élément DOM juste après le chargement de l’application, il est possible que cette dernière s’exécute du côté Node.js Et comme on vient de le voir, il n’y a pas d’éléments DOM dans Node.js.

La même chose se produira lors de l’accès au stockage local d’un navigateur. C’est la principale raison pour laquelle Nuxt.js utilise des cookies sur le stockage local – précisément parce qu’ils sont toujours accessibles.

Avec Vue, nous n’avons pas ce genre de problèmes, puisqu’il s’exécute toujours côté client. Voyons donc comment gérer ce type de problèmes dans Vue et comment le faire dans Nuxt.

Exemples de code dans Vue.js et Nuxt.js

Tutoriel de l’application nuxt.js

La chose la plus importante à retenir dans l’exemple de code que nous venons de vous partager est le retour précoce vers la méthode « créée ». Nuxt a un « processus » d’objet globalement accessible qui nous montre si nous fonctionnons actuellement côté serveur ou côté client. La logique derrière ce code précis est axée sur la gestion de la connexion socket. Et évidemment, nous ne voulons pas mettre à jour le DOM lors de la réception d’événements socket si nous exécutons sur le serveur, car il n’y a pas de DOM côté serveur. S’il s’agissait d’une application Vue.js, le code serait identique. A l’exception de la partie qui concerne le retour anticipé, car le processus serait toujours exécuté sur le client. Et il ne serait alors pas nécessaire de vérifier cette instruction particulière.

Notre avis sur Nuxt.js

Nuxt.js génère son propre routeur en fonction de la structure des dossiers. Alors qu’avec Vue.js, cela doit être fait manuellement. Gardez quand même à l’esprit qu’il y a des avantages et des inconvénients aux deux principes. Le principal avantage d’un routeur généré automatiquement est qu’il est plus facile et plus rapide à créer. Vous créez simplement le répertoire et les fichiers, et Nuxt fait tout le travail. Mais  il est aussi plus difficile à contrôler et à gérer qu’un routeur codé manuellement.

Nuxt.js vs vue.js

Avec Vue.js, vous pouvez facilement ajouter votre propre logique au routeur, importer des services et avoir plus de contrôle sur la gestion des itinéraires qu’avec un routeur généré manuellement. Ce principe prend plus de temps et est plus complexe, ce qui n’est pas toujours une mauvaise chose.

Nuxt est-il adapté à la mise à l’échelle de l’entreprise des applications ?

Il y avait auparavant deux facteurs qui faisaient que Nuxt.js n’était pas adapté à la mise à échelle d’application :

  • La mauvaise prise en charge de la dactylographie ;
  • La mauvaise gestion des erreurs côté serveur.

Alors que nous n’en étions encore qu’à la phase de recherche de notre projet (il y a environ 6 mois), il n’y avait pas de kits de démarrage ou de configurations Typescript fiables que nous aurions pu utiliser sans prendre trop de risques. Surtout, il y avait encore beaucoup d’erreurs de lint et de types manquants.

Nous avons donc décidé d’utiliser vanilla JS (ES6+). Entre-temps, la prise en charge de Typescript par Nuxt.js s’est considérablement améliorée. Il existe désormais de nouveaux kits de démarrage et de nouvelles configurations prêts à l’emploi et qui ne posent aucun problèmes avec Typescript.

La mauvaise gestion des erreurs côté serveur était le problème le plus important et le plus exigeant auquel nous avons dû faire face lors du développement d’une application Nuxt.js. Pendant que le code s’exécutait du côté du serveur Nuxt.js (Node.js), l’application lançait des messages d’erreur complètement indépendants. Et il était donc particulièrement difficile et complexe de déboguer et de corriger ces mêmes erreurs. Dû coup, notre équipe perdait beaucoup de temps à gérer les erreurs côté Node.js pou simplifier le débogage.

Grâce à une meilleure prise en charge de Typescript et une compréhension plus approfondie de SSR, on peut affirmer que Nuxt.js est adapté aux applications à moyenne et grande échelle. Ce qui ne veut pas dire qu’il ne reste pas beaucoup de travail. Notamment pour améliorer la gestion des erreurs et celle d’ AJAX sur le côté Node.js de Nuxt.

La structure de l’application Nuxt.js

Nuxt.js a une architecture très similaire à Vue.js. Il n’y a que deux différences majeures :

  • Le routeur ;
  • Le Composant principal App.vue

Nuxt génère la logique du routeur et ses itinéraires en fonction de la structure des répertoires et des fichiers de pages. Par exemple, si vous créez un répertoire et un fichier « about/index.vue », Nuxt.js crée automatiquement la route « /about » pour cette page. Du coup, vous n’aurez pas à définir ou configurer des routes ailleurs dans l’application.

Pour les routes imbriquées, la création d’un répertoire à l’intérieur du répertoire parent est la seule manipulation nécessaire – « about/me/index.vue » générera la route « about/me ». Et pour créer des routes imbriquées dynamiques ou des paramètres de route imbriqués, il suffit de nommer le sous-répertoire avec le préfixe lodash – « user/_id/index.vue » créera une route imbriquée dynamique pour les utilisateurs en fonction de leur identifiant.

Les mises en page

Tutoriel nuxt.js

Nuxt.js a une autre fonctionnalité très intéressante liée à sa structure : les mises en page.

Les applications Vue.js ont le fichier App.vue principal, qui est le wrapper principal du composant racine pour tous les composants de l’application. Nuxt.js utilise des mises en page, pour lesquelles chacune servira de wrapper individuel pour les composants d’application. Par exemple, si vous voulez que certaines pages spécifiques utilisent différentes bibliothèques d’interface utilisateur, styles CSS globaux, familles de polices, systèmes de conception, balises méta ou autres éléments, vous pouvez définir la mise en page à utiliser comme composant racine parent. Par défaut, toutes les pages Nuxt.js utilisent la mise en page default.vue.

Vuex dans Nuxt.js

Vuex dans Nuxt.js est structuré de manière presque identique à l’environnement Vue.js habituel : avec des modules de magasin.

Ce type de structuration est facultatif, mais fortement recommandé pour une meilleure maintenance de la structure et du code. Chaque magasin doit être structuré et modularisé en fonction de la logique de l’application et du flux de données.

Par exemple, si l’application contient une logique d’autorisation, vous devrez créer le module de magasin d’autorisations pour gérer toutes les données et la logique d’autorisation. Notamment la connexion, la déconnexion, les cookies, les tokens, les données utilisateur, etc.

Le mot de la fin : quand utiliser nuxt.js ?

Développer votre premier projet Nuxt.js sera sûrement déroutant et complexe au début. Surtout si vous avez l’habitude de travailler avec Vue.js mais aucune connaissance en SSR.

Mais comme toute technologie, il faut du temps, des erreurs et beaucoup de lignes de code pour vraiment comprendre la puissance et les avantages du framework Nuxt.js. Chez Agily, on attend avec impatience notre prochain projet Nuxt.js pour pouvoir utiliser toutes les nouvelles connaissances que nous avons acquises sur ce premier essai. On espère aussi pouvoir utiliser Typescript sans rencontrer les obstacles que l’on vient de mentionner.

Si vous souhaitez en savoir plus sur Nuxt.js, il existe d’excellentes ressources pour vous accompagner :

Nuxt.js est un framework très puissant avec de nombreuses fonctionnalités utiles qui rendent le développement d’applications front-end plus facile et plus fun Mais gardez à l’esprit que ce n’est pas le meilleur choix pour tous les types d’applications et de sites Web côté client.

Alors : Nuxt.js ou Vue.js ? La réponse n’est évidemment pas évidente. Il faut connaître les forces et les faiblesses de chacun. Et surtout savoir quand utiliser l’un plutôt que l’autre en fonction de votre projet, de ses objectifs et exigences.

Nuxt.js vs Vue.js ?

Nuxt offre :

  • une réelle amélioration du référencement avec sa fonctionnalité de rendu côté serveur,
  • un développement plus rapide avec un routeur auto-générique,
  • des fonctionnalités de partage public et de gestion avec d’excellentes options de configuration et des méthodes de balises méta,
  • une division automatique du code avec des pages pré-rendues…

Tout cela est impossible ou extrêmement complexe à réaliser avec Vue.js. Si ces fonctionnalités sont requises pour votre prochain projet, Nuxt.js sera un excellent choix.

D’un autre côté, si vous souhaitez développer un produit interne, étendre votre gestion et couverture de code ou créer un SPA côté client classique, vous n’aurez pas besoin de taux ni de performances de référencement. Et une logique de code manuelle plutôt que des solutions génériques sera bien plus adaptée, faisant de Vue.js une meilleure option.

Prêt à lancer de nouveaux projets ? Si vous avez une idée dont vous aimeriez discuter, partagez-la avec notre équipe !

Tous
Business
Jamstack
NodeJS
React Native
Développement Web & Mobile
Flutter
Mobile
Python
Strapi
Wordpress
UX/UI Design
Headless
Process business
Outils

Articles de la même catégorie

Refonte de site internet : améliorer son tunnel de conversion

5 conseils pour augmenter son taux de conversion lors de la refonte de votre site internet

Découvrez nos 5 conseils pratiques à appliquer lors de la refonte de votre site web pour augmenter votre taux de conversion !...
Express JS

Express JS : tout ce que vous devez savoir

Découvrez Express JS, le framework basé sur Node.js pour construire des backend puissants....
Angular vs React : que choisir ?

Angular vs React : que choisir pour votre entreprise ?

Vous hésitez entre Angular vs React pour développer votre site web d'entreprise ? Découvrez notre comparatif !...