Les modes de rendu

Ce que tu vas apprendre

• Les quatre façons dont Nuxt peut fabriquer tes pages.
• Les avantages et les limites de chacune.
• Comment mélanger les modes route par route avec routeRules.
• Comment préparer ton site pour la mise en ligne.

Où la page est-elle fabriquée ?

Une page HTML doit être fabriquée quelque part : au moment du build (une fois pour toutes), sur le serveur (à chaque visite), ou dans le navigateur du visiteur. Chaque mode fait un choix différent. Clique sur les onglets pour comparer :

// rien à écrire : c’est le mode par défaut

Universel : le choix par défaut

Sans rien configurer, Nuxt est en mode universel. Le serveur fabrique la page complète à chaque visite, puis Vue la rend interactive dans le navigateur : c'est l'hydratation. Tu as vu ce mécanisme au chapitre sur les données.

Pour la mise en ligne :

npm run build
node .output/server/index.mjs

Le dossier .output contient tout le nécessaire. Il te faut un hébergement capable de faire tourner un serveur (un VPS, ou une plateforme comme Vercel ou Netlify).

Client : tout dans le navigateur

export default defineNuxtConfig({
  ssr: false
})

Le navigateur reçoit une page vide et JavaScript construit tout. C'est adapté à un outil réservé à des utilisateurs connectés (un tableau de bord), où le référencement ne compte pas. Pour un site public, c'est rarement le bon choix.

Statique : tout au build

npx nuxt generate

Nuxt visite chaque page pendant le build et enregistre le HTML obtenu dans .output/public. Tu peux héberger ces fichiers n'importe où, souvent gratuitement (GitHub Pages, par exemple).

Hybride : chaque route son mode

Avec routeRules, tu choisis le mode adresse par adresse, dans le même projet :

export default defineNuxtConfig({
  routeRules: {
    '/': { prerender: true },          // fabriquée au build
    '/recettes/**': { swr: 3600 },     // fabriquée au serveur, gardée en cache une heure
    '/admin/**': { ssr: false }        // fabriquée dans le navigateur
  }
})

• prerender: true : la page est générée au build, comme en mode statique.
• swr: 3600 : le serveur garde la page en cache et la refabrique en arrière-plan au plus toutes les 3600 secondes. Les visiteurs reçoivent toujours une réponse immédiate.
• ssr: false : rendu dans le navigateur, comme en mode client.

Les ** veulent dire « toutes les adresses qui commencent par ». Comme certaines routes passent encore par le serveur, il faut un hébergement avec serveur.

Comment choisir

À retenir

• Universel (par défaut) : page fabriquée au serveur à chaque visite, puis hydratée.
• Client (ssr: false) : tout dans le navigateur, référencement faible.
• Statique (nuxt generate) : tout au build, pas de server/api en ligne.
• Hybride : routeRules choisit le mode route par route (prerender, swr, ssr: false).