SSR, SSG, PWA, TypeScript, Nitro : découvrez Nuxt.js, le framework Vue.js de référence pour des applications web performantes et bien référencées. Guide Smile.
Les projets web modernes cumulent des exigences qui semblaient contradictoires il y a encore quelques années : une performance optimale pour les Core Web Vitals, un SEO irréprochable pour le référencement naturel, une expérience développeur fluide et une architecture maintenable à long terme.
Nuxt répond à ces quatre exigences simultanément. C'est ce qui en a fait le framework de référence de l'écosystème Vue.js, adopté aussi bien pour des sites marketing que pour des applications métier complexes.
Ce guide vous explique ce qu'est ce framework Vue.js, ses modes de rendu, ses fonctionnalités clés et comment le déployer en production.
- Plus de 14 millions de téléchargements npm par semaine pour le framework Vue.js de référence (npmjs.com, 2024)
- Plus de 14 000 étoiles GitHub pour la version 3, qui s'est imposée comme le standard du développement Vue.js moderne (GitHub, 2024)
Qu'est-ce que Nuxt.js ?
Nuxt.js est un framework open source basé sur Vue.js qui ajoute une couche de conventions, d'outillage et de fonctionnalités pour construire des applications web performantes et bien architecturées. Il gère le rendu côté serveur, la génération de sites statiques, le routing automatique, les auto-imports et le déploiement sur n'importe quelle infrastructure.
Là où Vue.js est une bibliothèque pour construire des interfaces, ce framework est opinionné et fournit toute la structure nécessaire pour une application web complète de production.
Relation avec Vue.js : les apports du framework
Vue.js gère le rendu des composants côté client. Ce framework l'enveloppe et ajoute ce qui manque pour la production : le rendu côté serveur, le système de fichiers comme routeur, la gestion des métadonnées SEO, les auto-imports de composants et composables, et une architecture de modules extensible.
En résumé : Vue.js est le moteur. Ce framework est la voiture complète.
Comparaison avec Next.js : les différences clés
Les deux frameworks occupent la même position dans leurs écosystèmes respectifs : l'un est à Vue.js ce que Next.js est à React. Ils partagent les mêmes concepts (SSR, SSG, routing basé sur les fichiers, API routes) mais s'appuient sur des philosophies différentes.
Vue.js privilégie la simplicité et la lisibilité des templates. React privilégie la flexibilité et le tout-JavaScript. Le choix entre les deux dépend souvent du choix préalable entre Vue et React.
L'architecture de la version 3 : Nitro, Vite, Vue 3
La troisième version majeure repose sur trois fondations technologiques.
Nitro est le serveur universel intégré. Il permet de déployer une application sur n'importe quel environnement : Node.js, Deno, Bun, Cloudflare Workers, Vercel Edge, Netlify ou un serveur traditionnel. Ce serveur auto-détecte l'environnement de déploiement et optimise le build en conséquence.
Vite est le bundler et le serveur de développement. Il offre un démarrage quasi instantané et un HMR (Hot Module Replacement) ultra-rapide, quelle que soit la taille du projet.
Vue 3 avec la Composition API est le cœur des composants. Il apporte une meilleure performance, une meilleure inférence TypeScript et des composables réutilisables.
Les modes de rendu
C'est l'une des forces les plus distinctives du framework : la flexibilité des modes de rendu, configurables globalement ou par route.
SSR : Server-Side Rendering
Le rendu côté serveur génère le HTML de chaque page sur le serveur à chaque requête. Le navigateur reçoit un HTML complet, immédiatement indexable par les moteurs de recherche et affiché sans attendre l'exécution du JavaScript.
C'est le mode idéal pour les applications avec du contenu dynamique qui change souvent, les pages nécessitant une authentification ou une personnalisation, et tout projet où le SEO sur du contenu frais est critique.
SSG : Static Site Generation
La génération statique pré-génère toutes les pages au moment du build. Le résultat est un ensemble de fichiers HTML statiques servis directement depuis un CDN, sans serveur.
C'est le mode le plus performant et le moins coûteux à opérer. Il est idéal pour les sites dont le contenu change peu (documentation, blog, site marketing) et qui ont besoin d'une performance maximale.
SPA : Single Page Application
Le mode SPA désactive le rendu serveur. Toute l'application s'exécute côté client. C'est le comportement traditionnel de Vue.js.
Ce mode est adapté aux applications derrière authentification où le SEO n'est pas une priorité, ou aux outils internes et dashboards.
Rendu hybride : par route
La version 3 permet de configurer le mode de rendu route par route via les route rules. Une page d'accueil peut être en SSG, les pages produit en SSR, et l'espace client en SPA. Cette granularité fine est l'une des fonctionnalités les plus puissantes pour les projets complexes.
Guide de décision rapide
Mode | Cas d'usage idéal | Performance | SEO | Coût infra |
SSR | Contenu dynamique, personnalisé | Très bonne | Excellent | Moyen |
SSG | Site statique, blog, docs | Excellente | Excellent | Très faible |
SPA | App authentifiée, dashboard | Bonne | Faible | Faible |
Hybride | Projets mixtes complexes | Optimale | Excellent | Moyen |
Les fonctionnalités clés de la version 3
Auto-imports et composables
Le framework auto-importe automatiquement les composants, composables et utilitaires sans déclaration d'import explicite. Un composant placé dans le répertoire components est immédiatement disponible dans tous les templates. Un composable dans le répertoire composables est accessible partout sans import manuel.
Cette fonctionnalité réduit considérablement le boilerplate et améliore la lisibilité du code.
Routing automatique basé sur les fichiers
Chaque fichier dans le répertoire pages devient automatiquement une route. pages/index.vue correspond à /, pages/blog/[slug].vue correspond à /blog/:slug. Pas de configuration de routeur à maintenir.
Modules : l'écosystème extensible
Les modules étendent les fonctionnalités du framework via une API standardisée. L'écosystème officiel et communautaire couvre l'image optimization, l'internationalisation, le contenu Markdown, l'authentification, le SEO avancé et des dizaines d'intégrations tierces.
TypeScript natif
Le framework est entièrement écrit en TypeScript et génère automatiquement les types pour les routes, les composables et les APIs. L'inférence de types couvre l'ensemble du projet sans configuration manuelle.
Progressive Web App (PWA) avec Nuxt
Une Progressive Web App (PWA) est une application web qui adopte les comportements d'une application native : installation sur l'écran d'accueil, fonctionnement hors ligne via Service Worker, notifications push et chargement instantané.
Le module @vite-pwa intègre les capacités PWA dans n'importe quelle application Vue 3 avec une configuration minimale, en générant automatiquement le Service Worker, le manifeste et les icônes.
Performance et SEO
Core Web Vitals et optimisations
Le framework optimise automatiquement plusieurs métriques Core Web Vitals. Le code splitting automatique réduit le JavaScript initial chargé.
Le lazy loading des composants et des images réduit le LCP. Le prefetching des routes visibles améliore la navigation perçue. Ces optimisations sont actives par défaut sans configuration.
Gestion des métadonnées avec useHead
Le composable useHead permet de définir les balises meta, le titre, les liens canoniques et les données structurées de chaque page de manière déclarative et réactive. Combiné avec le SSR, les métadonnées sont présentes dans le HTML initial envoyé aux moteurs de recherche.
Image optimization automatique
Le module d'optimisation d'images optimise automatiquement les visuels : conversion en WebP/AVIF, redimensionnement selon le viewport, lazy loading natif et génération des attributs srcset. Une seule balise dédiée remplace des dizaines de lignes d'optimisation manuelle.
Lazy loading et code splitting
L'architecture divise automatiquement le bundle JavaScript par route. Chaque page ne charge que le JavaScript dont elle a besoin. Les composants marqués comme lazy sont chargés à la demande, réduisant le JavaScript initial à son strict minimum.
Déployer une application Vue.js avec ce framework
Vercel et Netlify : le déploiement sans friction
Vercel et Netlify détectent automatiquement les projets et configurent le déploiement optimal. Un push sur la branche principale déclenche automatiquement le build et le déploiement. Les previews de branches permettent de tester chaque pull request dans un environnement isolé.
Auto-détection avec Nitro
Le serveur Nitro détecte automatiquement l'environnement de déploiement cible et adapte le build en conséquence. Sur Vercel, il génère des fonctions edge.
Sur Netlify, des fonctions serverless. Sur un serveur Node.js, un serveur HTTP standard. Cette portabilité élimine le vendor lock-in d'infrastructure.
Déploiement on-premise et souverain
Le framework peut être déployé sur n'importe quelle infrastructure Linux avec Node.js. Pour les organisations avec des contraintes de souveraineté, un déploiement on-premise ou sur cloud souverain certifié SecNumCloud est tout à fait possible. Le mode SSG produit des fichiers statiques déployables sur n'importe quel serveur web sans Node.js.
Smile et Nuxt.js : notre expertise Vue
Chez Smile, nous développons des applications Vue.js en production avec ce framework depuis ses premières versions. Notre expertise couvre les projets e-commerce, les portails institutionnels, les applications métier et les sites à fort trafic avec des exigences SEO critiques.
Nous accompagnons nos clients dans le choix du mode de rendu adapté à leurs contraintes, la mise en place de l'architecture applicative, l'intégration avec les backends headless (Strapi, Directus, APIs métier) et le déploiement sur les infrastructures de production.
Notre expertise est reconnue par notre page technologie dédiée et notre participation active à l'écosystème Vue.js francophone.
Vous souhaitez développer votre prochain projet Vue.js ? Découvrez notre expertise en développement Nuxt.js.
Questions fréquentes sur Nuxt
Faut-il migrer de la version 2 à la version 3 ?
La version 3 est la référence depuis 2022 et concentre toutes les évolutions futures du framework. La version 2 est en maintenance jusqu'en décembre 2024. Pour les nouveaux projets, la version 3 est le seul choix pertinent. Pour les projets existants, la migration est recommandée mais peut être progressive grâce au bridge de compatibilité.
Ce framework est-il adapté aux projets e-commerce ?
Oui. Le mode hybride est particulièrement adapté à l'e-commerce : les pages catalogue peuvent être en SSG pour la performance maximale, les pages produit en SSR pour du contenu frais, et le panier en SPA pour une interaction instantanée. L'intégration avec les backends headless commerce (Shopify Storefront API, Magento, WooCommerce via API) est native.
Quelle est la différence entre useAsyncData et useFetch ?
useFetch est un raccourci de useAsyncData qui combine la définition de la clé de cache et l'appel fetch en une seule ligne. useAsyncData offre plus de contrôle pour les cas d'usage avancés (transformation des données, clé de cache personnalisée, gestion des dépendances réactives). Pour la majorité des appels API, useFetch est suffisant et plus concis.
Ce framework peut-il être utilisé avec un CMS headless ?
Oui, c'est même l'une de ses utilisations les plus courantes. L'intégration est native avec tous les CMS headless via leurs APIs (Strapi, Directus, Contentful, Sanity, WordPress REST API). Le module de contenu permet également de gérer du contenu Markdown directement dans le projet, sans CMS externe.