Vue Academy · Leçon

Modes SSR, SSG et SPA

ssr:true/false, prérendu Nitro, commande generate et rendu hybride par route

Modes SSR, SSG et SPA est une leçon Vue 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 Vue Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Vue Academy comprend 4 leçons au total.

Présentation des modes de rendu

Nuxt peut effectuer le rendu de votre application de trois façons : SSR (le serveur effectue le rendu à chaque requête), SSG (les pages sont préconstruites lors de la compilation) et SPA (tout est rendu dans le navigateur). Vous pouvez même les mélanger selon les routes.

SSR : le mode par défaut

Avec ssr: true (la valeur par défaut), le serveur génère le HTML pour chaque requête et le client l’hydrate. Vous obtenez ainsi un affichage initial rapide et un bon référencement, car les robots voient un balisage complet.

// nuxt.config.ts
export default defineNuxtConfig({
  ssr: true
})

Quand le SSR est idéal

Le SSR convient aux contenus qui changent souvent ou qui sont personnalisés — tableaux de bord, fils d’actualité et sites de commerce en ligne avec des prix actualisés — lorsque vous souhaitez du HTML à jour à chaque requête.

Mode SPA

Définir ssr: false transforme Nuxt en application monopage : le serveur envoie une coquille vide et le navigateur effectue tout le rendu. L’hébergement est plus simple, mais le référencement est moins bon et l’affichage initial plus lent.

export default defineNuxtConfig({
  ssr: false
})

Quand le mode SPA convient

Le mode SPA convient aux outils internes et aux applications derrière une connexion, lorsque le référencement n’est pas important et que vous souhaitez déployer des fichiers statiques sur n’importe quel CDN.

SSG : génération de site statique

L’exécution de nuxt generate génère à l’avance chaque page en HTML statique lors de la compilation. Le résultat est un dossier de fichiers que vous pouvez héberger n’importe où, sans serveur Node.

npx nuxt generate
# outputs static HTML to .output/public

Quand le SSG convient

Le SSG est idéal pour les contenus qui changent rarement — blogs, documentations et sites marketing. Les pages sont extrêmement rapides et peu coûteuses à diffuser depuis un CDN.

Rendu par route avec routeRules

La configuration routeRules définit le mode de rendu selon le modèle de chemin. Il s’agit d’un rendu hybride : différentes parties d’une même application utilisent des stratégies différentes.

export default defineNuxtConfig({
  routeRules: {
    '/': { prerender: true },
    '/admin/**': { ssr: false },
    '/blog/**': { swr: 3600 }
  }
})

Options routeRules courantes

prerender: true génère la page lors de la compilation ; ssr: false la transforme en SPA ; swr: n met en cache le résultat SSR pendant n secondes (obsolète pendant la revalidation) ; redirect redirige les utilisateurs ailleurs.

Régénération statique incrémentielle

L’option isr génère la page lors de la première requête et met le résultat en cache, puis le régénère périodiquement. Elle associe la rapidité du SSG à la fraîcheur du SSR pour les pages populaires.

routeRules: {
  '/products/**': { isr: 600 }
}

Choisir une stratégie

Commencez par le SSR pour obtenir le meilleur compromis par défaut entre référencement et interactivité. Utilisez le SSG pour les contenus statiques, le SPA pour les applications privées et routeRules pour affiner les routes individuelles lorsque les besoins de performance apparaissent.

Vérification rapide

Vérifiez vos connaissances sur les modes de rendu.

Récapitulatif

Vous avez découvert les modes de rendu :

Le SSR (par défaut) effectue le rendu à chaque requête : bon référencement et affichage initial rapide.
ssr:false fournit un SPA pour les applications privées.
nuxt generate produit un site SSG statique.
routeRules active le rendu hybride : prerender, swr, isr et ssr:false selon la route.

Questions Fréquemment Posées

La leçon « Modes SSR, SSG et SPA » est-elle gratuite ?

Oui — le texte complet de « Modes SSR, SSG et SPA » 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 Vue Academy, passe à CoddyKit PRO. Le cours Vue Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Modes SSR, SSG et SPA » ?

ssr:true/false, prérendu Nitro, commande generate et rendu hybride par route Tu pratiques Vue 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 Vue Academy ?

Aucune expérience préalable n'est requise. Vue 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 « Modes SSR, SSG et SPA » ?

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 Vue Academy ?

Oui. Chaque leçon Vue 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

← Retour à Vue Academy