Développement Nuxt.js

Qu'est-ce que Nuxt ?

Nuxt est un framework Vue.js qui gère tout ce dont une application de production a besoin : le rendu côté serveur, la génération de sites statiques, le routage basé sur le système de fichiers, la gestion d'état, et les routes API serveur -- avec presque aucune configuration. Là où Vue simple nécessite d'assembler ces pièces vous-même, Nuxt les fournit en tant que système cohérent et opinionné.

La caractéristique déterminante est la flexibilité de rendu. Une seule application Nuxt peut servir différentes routes avec différentes stratégies de rendu : rendre côté serveur la page d'accueil pour le SEO, pré-rendre statiquement les articles de blog au moment de la compilation, et rendre côté client le tableau de bord connecté. C'est le mode de rendu hybride de Nuxt, configuré par route dans nuxt.config.ts.

Routage basé sur le système de fichiers

Nuxt génère les routes automatiquement à partir de votre répertoire pages/. Aucun fichier de configuration de route nécessaire. Un fichier à pages/blog/[slug].vue devient /blog/:slug. Un fichier à pages/about.vue devient /about. Les répertoires imbriqués créent des routes imbriquées.

Cela s'étend à la couche serveur. Les fichiers dans server/api/ deviennent des points de terminaison API. server/api/posts.get.ts devient un gestionnaire GET /api/posts. Full-stack dans un seul projet, avec TypeScript partout.

La même convention s'applique à :

• composables/ : Composables Vue auto-importés -- useFetch, useState, useAsyncData
• middleware/ : Middleware de route qui s'exécute avant la navigation
• layouts/ : Composants de mise en page partagés qui enveloppent les pages
• plugins/ : Code qui s'exécute à l'initialisation de l'application
• components/ : Composants Vue auto-importés sans déclarations d'importation explicites

Modes de rendu

SSR (rendu côté serveur) : Mode par défaut. Le HTML est rendu sur le serveur par requête. Idéal pour le contenu dynamique, la personnalisation, et les pages authentifiées. Alimenté par le moteur serveur Nitro.

SSG (génération de site statique) : Les pages sont pré-rendues au moment de la compilation. Le résultat est du HTML statique servi depuis un CDN. Configuré avec nitro.prerender.routes ou en définissant ssr: false au niveau de la route.

Rendu hybride : Différentes routes utilisent différentes stratégies. routeRules dans nuxt.config.ts vous permet de définir prerender, ssr, cache TTL, redirect, et les règles CORS par route. C'est la fonctionnalité la plus puissante et la moins utilisée de Nuxt.

Mode SPA : Rendu entièrement côté client. Utile pour les panneaux d'administration ou les tableaux de bord où le SEO n'est pas une préoccupation et l'interactivité est la priorité.

Ce que nous construisons avec Nuxt

Sites marketing et plateformes de contenu

Nuxt avec SSG ou rendu hybride est une combinaison solide pour les sites marketing. Les routes de contenu sont pré-rendues pour les performances et le SEO. Les routes dynamiques -- recherche, filtres, recommandations personnalisées -- utilisent SSR ou la récupération côté client. Le résultat est un site rapide, friendly pour le SEO, avec l'interactivité complète où nécessaire.

Applications web full-stack

La couche serveur de Nuxt (Nitro) gère les routes API, les middleware, les connexions aux bases de données, et la logique côté serveur dans le même projet que le frontend. C'est un vrai framework full-stack -- nous l'utilisons pour les applications où un serveur API séparé ajouterait une complexité inutile.

Nuxt avec CMS headless

Nuxt s'intègre proprement avec les CMS headless : Strapi, Contentful, Sanity, et DatoCMS ont tous des modules Nuxt officiels ou communautaires. Nous configurons la couche de données, mettons en place la mise en cache ISR pour les routes de contenu, et connectons le webhook du CMS à un déclencheur de reconstruction Nuxt.

Migrations Vue vers Nuxt

Les équipes avec des SPAs Vue.js existantes qui ont besoin de SSR pour le SEO migrent souvent vers Nuxt. Le modèle de composants est identique -- la migration est principalement une restructuration du routage et l'ajout de la récupération de données côté serveur. Nous gérons ces migrations et préservons toute la logique de composants existante.

Le moteur serveur Nitro

Le moteur Nitro de Nuxt gère le rendu côté serveur et les routes API. Il est agnostique au framework : la même application Nuxt peut être déployée sur Node.js, Cloudflare Workers, AWS Lambda, Vercel Edge Functions, ou Netlify sans changements de code. Cette flexibilité de déploiement est un avantage opérationnel significatif.

Écosystème des modules Nuxt

Le système de modules de Nuxt ajoute des capacités avec une configuration minimale :

• @nuxt/content : CMS basé sur des fichiers utilisant Markdown/YAML/JSON. Idéal pour les sites de documentation et les blogs.
• @nuxt/image : Optimisation automatique des images, conversion de format, et chargement lazy.
• @pinia/nuxt : Gestion d'état Pinia, auto-importée et compatible SSR.
• @nuxtjs/i18n : Internationalisation avec routage basé sur la locale.
• @nuxtjs/tailwindcss : Intégration Tailwind CSS.
• nuxt-security : En-têtes de sécurité, protection CSRF, limitation de débit.

Nous sélectionnons et configurons les modules en fonction des exigences du projet. Pas de module superflu.

Nuxt vs Next.js

Les deux sont des meta-frameworks de qualité production. Le choix est principalement basé sur les connaissances existantes de votre équipe et la préférence pour Vue vs React.

Choisissez Nuxt quand :

• Votre équipe connaît Vue.js et préfère son modèle de composants
• Vous voulez des valeurs par défaut complètes avec moins de configuration
• Vous valorisez l'écosystème des modules Nuxt pour l'ajout rapide de fonctionnalités
• Vous voulez le rendu hybride sans configuration de middleware complexe

Choisissez Next.js quand :

• Votre équipe est basée sur React
• Vous avez besoin de React Server Components
• Vous voulez les optimisations natives de Vercel

Les deux se déploient proprement sur Vercel, Netlify, et Cloudflare. Nous avons de l'expérience avec les deux et serons honnêtes sur celui qui convient le mieux à votre projet et votre équipe spécifiques.