Le Grand Virage : Migration de Djolosports de Vue 3 SPA vers Nuxt 3
Vue est mon framework Frontend préféré. Il ne vous impose pas de structurer votre projet d’une manière figée comme Angular, et il offre des performances supérieures avec moins de “boilerplate” que React (je suis prêt à mourir sur cette colline, avis aux fans de React).
Au moment de choisir pour Djolosports, la décision était sans appel : le frontend serait en Vue.
Pour la V1 de Djolosports, nos objectifs étaient simples :
- Couvrir la Coupe d’Afrique des Nations (CAN) 2025.
- Ingérer nos propres données de match de manière fiable.
- Afficher ces données de façon uniforme et structurée.
- Valider notre capacité à générer et afficher du contenu sans dépendre de fournisseurs tiers.
Ce fut un succès. Nous avons couvert les 52 matchs avec précision et généré des analyses poussées à partir de nos propres données granulaires. Cependant, un problème de taille persistait : la branche média ne pouvait pas partager d’articles de manière professionnelle, et il était impossible de trouver Djolosports dans les résultats de recherche Google.
La Limite : Le Client-Side Rendering (CSR)
Vue est un framework côté client (CSR). Lorsqu’un utilisateur fait une requête, voici ce qu’il se passe :
- Chargement du Bundle : Le navigateur télécharge l’intégralité du bundle JavaScript (logique, animations, appels API). Celui-ci est injecté dans un élément HTML avec l’ID
app. Ensuite, le scriptmain.jss’exécute et génère le contenu.
- Affichage Statique : Si le contenu est purement statique, il s’affiche presque instantanément.
- Récupération Dynamique : Si des données sont nécessaires, le navigateur n’effectue la requête réseau vers l’API qu’après le chargement de l’application Vue.
Dans une application Vue standard, le contenu dynamique n’est jamais disponible au moment précis où le client accède à la page. Cette spécificité est un véritable tueur de SEO.
Le Problème du Routage
Vue-router est un système côté client. La liste des routes n’est disponible qu’après l’exécution du JavaScript. Lorsqu’un robot d’indexation visite djolosports.com/fr/sports/, le serveur envoie le même fichier index.html vide que pour la page d’accueil. Le “routage” ne se produit que dans le navigateur. Les robots voient une page vide et ne vous référencent pas.
La Solution : Le passage à Nuxt
C’est ici qu’entre en scène Nuxt, le “grand frère” de Vue. Un framework puissant accompagné d’un serveur invisible appelé Nitro.
Nitro est conçu pour être “serverless-first”. Il n’a pas besoin d’un environnement Node.js ou Python dédié ; il compile les composants Vue dans un micro-serveur capable de tourner sur des environnements minimaux comme Vercel, Netlify ou même Cloudflare Workers.
Comment ça marche :
- Sur le serveur Nitro : Lorsqu’un utilisateur (ou un robot Google) demande une page, Nitro exécute le code Vue sur le serveur, récupère les données et génère une chaîne HTML statique. C’est ce qui est envoyé instantanément à l’utilisateur.
- Dans le navigateur (Hydratation) : Une fois l’HTML arrivé, le navigateur télécharge un petit bundle Vue qui “réveille” l’HTML statique pour le rendre réactif. C’est l’Hydratation.
La page n’est jamais blanche. Les moteurs de recherche reçoivent un document complet avec mots-clés, titres et métadonnées.
Comparaison des systèmes de routage
Nuxt utilise un système de routage basé sur les fichiers. Plus besoin de configuration : si vous créez pages/sports/football.vue, Nuxt crée automatiquement la route /sports/football.
En tant que framework SSR, il mappe ces routes sur le serveur. Le robot reçoit un document complet spécifique au “Football”, faisant de Nuxt le standard pour les plateformes riches en contenu.
SEO : Vue (CSR) vs Nuxt (SSR)
| Fonctionnalité | Vue (CSR) | Nuxt (SSR) |
|---|---|---|
| Injection Meta Tags | Dans le navigateur après chargement | Sur le serveur Nitro avant livraison |
| Partage Social | Souvent des aperçus génériques “Chargement…” | Aperçus riches (images/descriptions) |
| Découverte d’URL | Les robots doivent exécuter le JS | Les robots voient les liens en HTML brut |
Conclusion
Avec une application Vue pure, vous construisez une “Single Page Application” (SPA). Pour le reste du web, votre site ressemble à une seule page qui change simplement de vêtements.
Nuxt transforme cette SPA en une expérience multi-pages pour le monde extérieur, tout en gardant la fluidité du “sans rechargement” pour l’utilisateur. Djolosports est désormais propulsé par Nuxt ; une décision scalable qui permettra à notre plateforme d’atteindre de nouveaux sommets.