Nuxt est un framework open source qui permet de créer des applications plus facilement en utilisant des composants Vue.js. Son principal objectif est de fournir une structure de projet prête à l'emploi avec le support du rendu côté serveur afin d'améliorer l'expérience utilisateur et le référencement de site développés avec Vue.js.
Avantages
Nuxt offre 2 avantages principaux :
Une structure imposée qui permet de se concentrer sur le code. Il intègre vue-router mais vous n'aurez pas à définir les routes vous même. La position et le nom des fichiers vue permet à Nuxt de générer les routes pour vous.
Le rendu côté serveur permet à Nuxt d'utiliser vos composant vue pour générer le code HTML des pages qui composent votre site. Cela permet aux visiteurs de ne pas avoir à attendre le JavaScript pour voir la page s'afficher, mais permet aussi aux moteurs de recherche de pouvoir référencer votre site convenablement. Si vous avez besoin de plus d'information sur les différents mode de rendu je vous renvoie vers cette vidéo qui explique la différence entre le rendu côté client et le rendu côté serveur.
Plusieurs modes de rendu
Avec Nuxt il est donc possible de générer des pages HTML qui vont être renvoyées à l'utilisateur. Ce rendu HTML peut être fait de plusieurs manières et il est impératif de les comprendre pour bénéficier au maximum des avantages de Nuxt.
Le rendu côté serveur (SSR)
Le rendu Serveur est la méthode par défaut utilisé pour rendre les pages via Nuxt. Lorsque un utilisateur accède à une page, le serveur exécute le code du composant et génère l'HTML pour cette page. Le rendu est ensuite envoyé au client, qui affiche simplement l'affichage HTML. Cette approche est intéressante pour des contenus dynamique qui change souvent mais apporte plusieurs inconvénients :
- Surcharge du serveur : Si votre application web est très populaire ou si vous avez des pages complexes à rendre, cela pourrait entraîner une surcharge du serveur.
- Temps d'attente plus longs : Les pages prennent un peu plus de temps à charger puisqu'elles doivent être rendues côté serveur.
Le rendu statique
Le pré rendu consiste à rendre les pages à la compilation, en génération les version HTML à l'avance qui peuvent ensuite être distribuées simplement. Cela permet de remédier aux 2 problèmes vus plus haut mais ne fonctionne que pour des pages dont le contenu ne change jamais.
Le rendu sur demande
Ce type de rendu est un mélange entre les 2 types de rendu précédents. Le principe est alors de distribuer aux utilisateurs une version pré générée de la page mais de rendre en tâche de fond une nouvelle version de la page si la durée de la mise en mémoire est écoulée. Cette approche permet d'avoir la rapidité de rendu statique tout en ayant des données qui s'actualisent à un intervalle de temps prédéfini.
Il est possible de passer d'un mode de rendu à l'autre au cas par cas à l'aide de la configuration nuxt.config.ts.
export default defineNuxtConfig({
routeRules: {
// La page d'accueil est préchargée lors de la compilation
'/': { prerender: true },
// La page produits est générée à la demande, se revalide en arrière-plan et reste dans le cache jusqu'à ce que les données API aient changé
'/products': { swr: true },
// Les pages de produit sont générées à la demande, se révalident en arrière-plan et restent dans le cache pendant 1 heure (3600 secondes)
'/products/**': { swr: 3600 },
// La page blog est générée à la demande, se revalide en arrière-plan et reste dans le cache sur les serveurs CDN pendant 1 heure (3600 secondes)
'/blog': { isr: 3600 },
// Les pages de billet du blog sont générées à la demande une seule fois jusqu'à la prochaine mise à jour, restent dans le cache sur les serveurs CDN
'/blog/**': { isr: true },
// La page d'interface administrative est affichée uniquement côté client
'/admin/**': { ssr: false },
// Ajoutez des en-têtes CORS aux routes API
'/api/**': { cors: true },
// Redirige les anciennes URLs vers de nouvelles URLS
'/old-page': { redirect: '/new-page' }
}
})Pour plus d'information sur les méthodes de rendu vous pouvez vous rendre sur la page Rendering Modes de la documentation.
