Rendu client uniquement (SPA classique)          Rendu côté serveur (SSR)
──────────────────────────────────────           ──────────────────────────────────
1. Navigateur reçoit un HTML quasi vide           1. Serveur exécute le composant Vue
2. Télécharge le bundle JS                        2. Génère le HTML complet (contenu visible)
3. Vue s'exécute, construit le DOM                3. Navigateur reçoit un HTML déjà rempli
4. Contenu enfin visible                          4. "Hydratation" : Vue attache les listeners
                                                      sur le HTML existant (pas de reconstruction)

# Nuxt 3 est le framework SSR/meta-framework officiel bâti sur Vue 3
npx nuxi@latest init mon-app-nuxt
cd mon-app-nuxt
npm run dev

mon-app-nuxt/
├── pages/              # routing par fichiers -> pages/produits/[id].vue = /produits/:id
├── components/         # auto-importés, pas besoin d'écrire `import`
├── composables/        # auto-importés également
├── server/api/         # endpoints API serveur (ex: server/api/produits.get.ts)
├── layouts/            # gabarits partagés (default.vue, admin.vue...)
├── app.vue             # point d'entrée
└── nuxt.config.ts      # configuration centrale

<!-- pages/produits/[id].vue — routing par fichier, useAsyncData exécuté CÔTÉ SERVEUR puis hydraté -->
<script setup>
const route = useRoute()

// useAsyncData : exécuté sur le serveur au premier rendu, le résultat est sérialisé
// et transmis au client (pas de double appel réseau lors de l'hydratation).
const { data: produit, pending, error } = await useAsyncData(
  `produit-${route.params.id}`,
  () => $fetch(`/api/produits/${route.params.id}`)
)

// useSeoMeta : injecte les balises meta CÔTÉ SERVEUR, essentiel pour le SEO et les aperçus sociaux
useSeoMeta({
  title: () => produit.value?.nom ?? 'Produit',
  description: () => produit.value?.description,
  ogImage: () => produit.value?.image,
})
</script>

<template>
  <p v-if="pending">Chargement...</p>
  <p v-else-if="error">Produit introuvable</p>
  <article v-else>
    <h1>{{ produit.nom }}</h1>
    <p>{{ produit.prix }} €</p>
  </article>
</template>

// server/api/produits/[id].get.ts — endpoint API serveur, colocalisé avec le frontend
export default defineEventHandler(async (event) => {
  const id = getRouterParam(event, 'id')
  const produit = await recupererProduitDepuisBDD(id)
  if (!produit) {
    throw createError({ statusCode: 404, statusMessage: 'Produit introuvable' })
  }
  return produit
})

// nuxt.config.ts — bascule entre stratégies de rendu, PAGE PAR PAGE
export default defineNuxtConfig({
  routeRules: {
    '/': { prerender: true },             // SSG : générée à la build, servie en statique
    '/produits/**': { swr: 3600 },        // stale-while-revalidate : cache 1h, régénérée en arrière-plan
    '/tableau-de-bord/**': { ssr: false }, // rendu 100% client (données privées, pas de SEO nécessaire)
    '/admin/**': { index: false },        // exclu de l'indexation moteurs de recherche
  },
})

// Piège SSR classique : le code exécuté côté serveur n'a PAS accès à window/document/localStorage
// Mauvais : plante au rendu serveur
// const largeur = window.innerWidth

// Bon : garder ce code pour le client uniquement
import { onMounted, ref } from 'vue'
const largeur = ref(0)
onMounted(() => { largeur.value = window.innerWidth }) // onMounted ne s'exécute JAMAIS côté serveur