NuxtJS, la génération statique et le SSR à la sauce VueJS

Article publié le 20/10/2020, dernière mise à jour le 19/09/2023

La semaine dernière je vous parlais de SSR dans mon article intitulé "Qu'est-ce que le SSR ou Server-Side Rendering ?"

Je vous conseille de le lire si le concept de SSR ne vous est pas familier.

OVous connaissez donc les bénéfices du SSR en terme de SEO et d'optimisation des performances, mais comment pouvoir en profiter tout en bénéficiant de la puissance des frameworks front-end déjà existants ?

C'est là que rentre en jeu le framework NuxtJS qui vient par dessus VueJS afin d'y apporter de nouvelles fonctionnalités, dont notamment de nouvelles méthodes de rendus.

Si vous êtes un développeur React, il existe des équivalents comme NextJS (SSR) ou Gatsby (Static), qui ne seront pas abordés dans cet article.

Pourquoi ajouter une surcouche à VueJS ?

Comme je l'ai déjà expliqué pour le blog, VueJS n'est pas un framework au sens propre du terme, mais plutôt une librairie front-end basée sur une architecture modèle-vue-controlleur et propulsé par les web components.

NuxtJS permet donc de développer des projets parfaitement structurés ainsi que d'ajouter des fonctionnalités supplémentaires natives tels que :

  • Déploiement d'une application en SSR
  • Génération statique de l'application
  • Abstraction du code client et serveur
  • Gestion des "single file components" .vue
  • Compatibilité ES6/ES7/Typescript grâce à une version de Babel intégrée

Ou encore de nombreuses autres fonctionnalités additionelles disponibles grâce à une myriade de modules officiels ou supportés par la communauté comme par exemple :

  • Intégration de tracking google analytics
  • Génération de sitemap automatisé
  • Implémentation en composants des librairies CSS les plus populaires
  • Internationalisation
  • Notifications Toasts
  • etc...

Vous pouvez retrouver la liste de tous les modules disponibles sur le site suivant : https://modules.nuxtjs.org/

SSR vs Static

NuxtJS implémente nativement deux nouvelles manières de déployer vos projets VueJS, chacune bénéficiant de leurs avantages. Pour créer un projet NuxtJS, il vous suffira d'exécuter l'outil prévu à cet effet et de suivre les questions qui vous seront posées :

npx create-nuxt-app my-project

> project: my-project
> language: Javascript
> packet manager: yarn
> UI framework: Tailwind CSS
> NuxtJS modules: axios
> Linting tools: ESLint
> Testing framework: Jest
> Rendering mode: SSR
> Deployment target: Server (NodeJS)
...

Une fois généré, pour lancer votre projet Nuxt en mode SSR, il ne vous suffira que d'exécuter la commande suivante : npm run dev

Et pour demander à NuxtJS de générer toute l'application de manière statique, c'est à dire uniquement composé de fichiers html, css et un bundle JS, il vous suffit de taper la commande suivante : npm run generate

Et voilà ! Le tour et joué et en quelques minutes vous aurez pu créer une application NuxtJS fonctionnant en SSR ou hébergeable sur un serveur de fichiers statique !

Il ne vous reste plus qu'à modifier légèrement votre projet existant en VueJS pour le migrer vers Nuxt et bénéficier de toutes les fonctionnalités précédemment citée.


Pawel Janiak sur Unsplash

Vous avez terminé l'article ?

Commentaires (0)

pour laisser un commentaire

Aucun commentaire pour l'instant