Déploiement : statique ou SSR
Générez un site entièrement statique avec nuxt generate, déployez une application SSR sur un serveur Node ou un environnement edge et configurez le moteur Nitro de Nuxt.
Déploiement : statique ou SSR est une leçon Frontend Academy gratuite sur CoddyKit. Ceci est la leçon 4 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Frontend Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Frontend Academy comprend 4 leçons au total.
Nuxt effectue le rendu partout
Nuxt 3 prend en charge quatre modes de déploiement : Statique (nuxt generate), SSR (serveur Node), Périphérie (Cloudflare Workers, Vercel Edge) et Hybride (par route).
Déploiement statique
nuxt generate pré-génère chaque route dans des fichiers HTML. Déployez le dossier .output/public sur n’importe quel hébergeur statique (Netlify, Vercel, GitHub Pages, S3).
npm run generate
# .output/public/ contains:
# index.html, about/index.html, blog/post-1/index.html, ...
# Deploy:
npx wrangler pages deploy .output/public
# or
rsync -av .output/public/ user@host:/var/www/Générer des routes dynamiques
Pour des routes telles que /blog/[slug], Nuxt doit connaître tous les paramètres slug. Fournissez-les via nitro.prerender.routes dans config.
// nuxt.config.ts
export default defineNuxtConfig({
nitro: {
prerender: {
routes: ['/blog/post-1', '/blog/post-2', '/blog/post-3']
}
}
});
// Or auto-discover: Nitro follows links from /, generating any it finds.Déploiement SSR sur Node
nuxt build crée un serveur Nitro. Déployez-le sur n’importe quel hébergeur Node (Render, Railway, Fly.io, votre VPS) en exécutant node .output/server/index.mjs.
npm run build
# .output/server/index.mjs is the Nitro server
# .output/public/ contains static assets
node .output/server/index.mjs # starts on PORT (default 3000)Nitro — le serveur universel
Le serveur de Nuxt 3 est Nitro — un moteur portable ciblant n’importe quel environnement d’exécution : Node, Bun, Deno, Cloudflare Workers, Vercel, Netlify et AWS Lambda. Changez de cible avec nitro.preset.
Déploiement en périphérie (Cloudflare Workers)
Définissez le préréglage sur cloudflare-pages ou cloudflare. La compilation produit un Worker qui s’exécute à la périphérie de Cloudflare.
// nuxt.config.ts
export default defineNuxtConfig({
nitro: { preset: 'cloudflare-pages' }
});
// Build, then:
npx wrangler pages deploy ./distDéploiement en périphérie (Vercel Edge)
Vercel détecte automatiquement Nuxt et utilise le bon préréglage. Pour forcer l’environnement d’exécution Edge : preset: 'vercel-edge'.
Rendu hybride
Les différentes routes peuvent être rendues différemment. Configurez cela avec routeRules.
// nuxt.config.ts
export default defineNuxtConfig({
routeRules: {
'/': { prerender: true }, // SSG
'/blog/**': { isr: 60 }, // ISR every 60s
'/dashboard/**': { ssr: false }, // SPA (client-only)
'/admin/**': { ssr: true } // SSR (per-request)
}
});Choisir entre statique et SSR
Statique : le contenu change rarement, vitesse maximale et hébergement CDN peu coûteux (blogs, sites promotionnels, documentation). SSR : contenu propre à chaque utilisateur, données dynamiques et résultats de recherche (tableaux de bord, commerce en ligne). Le mode hybride permet de les combiner route par route.
Variables d’environnement
Utilisez runtimeConfig dans nuxt.config.ts. public est exposé au client : le reste demeure uniquement côté serveur.
export default defineNuxtConfig({
runtimeConfig: {
apiSecret: '', // server-only, set via NUXT_API_SECRET env
public: {
apiBase: 'https://api.example.com' // accessible client-side
}
}
});
// In a component:
const config = useRuntimeConfig();
console.log(config.public.apiBase);Mise en cache de la compilation en CI
Mettez .nuxt/ et node_modules/ en cache entre les exécutions de CI pour accélérer les compilations. Sur Vercel et Netlify, cette opération est automatique.
Tester les performances
Après le déploiement, exécutez Lighthouse sur l’URL déployée — et non sur l’hôte local. CDN réel, véritables emplacements périphériques et limitation réelle du CPU.
Vérification rapide
Quelle commande Nuxt 3 pré-génère toutes les routes en HTML statique pour un déploiement sur un CDN comme Netlify ou Cloudflare Pages ?
Récapitulatif : déploiement Nuxt
nuxt generate → statique (déployer .output/public). nuxt build → SSR (déployer avec Node). Les préréglages Nitro ciblent Cloudflare, Vercel, Netlify, AWS, etc. routeRules permet le rendu hybride (prerender, isr, ssr, spa par route). runtimeConfig sert aux variables d’environnement (public est exposé au client). Effectuez les vérifications avec Lighthouse sur l’URL déployée.
Questions Fréquemment Posées
La leçon « Déploiement : statique ou SSR » est-elle gratuite ?
Oui — le texte complet de « Déploiement : statique ou SSR » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Frontend Academy, passe à CoddyKit PRO. Le cours Frontend Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « Déploiement : statique ou SSR » ?
Générez un site entièrement statique avec nuxt generate, déployez une application SSR sur un serveur Node ou un environnement edge et configurez le moteur Nitro de Nuxt. Tu pratiques Frontend Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer Frontend Academy ?
Aucune expérience préalable n'est requise. Frontend Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 4 sur 4.
Combien de temps prend la leçon « Déploiement : statique ou SSR » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon Frontend Academy ?
Oui. Chaque leçon Frontend Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- Routage fondé sur les fichiers et imports automatiques
- useFetch et useAsyncData
- Modules Nuxt : images, authentification et i18n
- Déploiement : statique ou SSR