Motion-Café — Migration Legacy & Architecture SSG

Remplacer un monolithe legacy sans casser le SEO ni interrompre le service, c'est l'un de ces exercices d'ingénierie où le pragmatisme technique prévaut sur la hype.

🎯 Le Problème & La Solution

Motion-Café est une plateforme communautaire de référence pour les passionnés de Motion Design, 3D et VFX. Le site d'origine reposait sur une architecture vieillissante qui limitait l'évolution du produit et pesait sur les performances d'affichage.

L'objectif de cette refonte était triple :

1. Découpler la couche de contenu en migrant l'historique vers un CMS headless (Directus).
2. Garantir une fidélité visuelle absolue vis-à-vis des nouvelles maquettes.
3. Exploiter le pré-rendu statique (SSG) pour offrir un temps de chargement quasi-instantané tout en laissant au client la pleine maîtrise de son infrastructure à moindre coût.

🛠️ Sous le Capot (Stack & Archi)

• Frontend : Next.js exploité en Static Site Generation (SSG). Les pages sont pré-rendues côté serveur au build pour garantir des performances d'affichage maximales, un temps de réponse minimal et un référencement naturel optimal.
• UI & Style : Tailwind CSS et shadcn/ui pour construire rapidement des composants accessibles, légers et conformes à la direction artistique.
• CMS Headless : Directus configuré et mis à disposition du client pour gérer la structure des données et l'administration des contenus.
• DevOps & Infrastructure : Déploiement du stack complet (Directus + Next.js) orchestré via Coolify sur un VPS dédié. Ce choix simplifie l'automatisation CI/CD, réduit drastiquement la facture d'hébergement et délègue la gestion automatique du HTTPS/SSL au reverse-proxy intégré.
• Analytics : Intégration d'Umami (self-hosted), une solution d'analytics légère et respectueuse de la vie privée pour offrir une visibilité sur le trafic sans alourdir le bundle JS côté client.

🥊 Le Challenge Technique

• Migration des données legacy : Récupération de l'historique de l'ancien site sous forme de données JSON bruts, suivie du développement d'un script d'importation sur-mesure pour parser, assainir et mapper dynamiquement ces données vers le schéma relationnel de Directus.
• Invalidation du SSG par Webhook : Pour concilier la vitesse du statique et la fraîcheur des données en publication, un flux de régénération statique a été mis en place. Un webhook publié par Directus à chaque modification de contenu vient déclencher la reconstruction automatique des pages Next.js.
• Preview des données depuis directus: Avant de valider le contenu, il fallait mettre en place un système de preview coté directus. Il fallait donc avoir une route en SSR plutot que SSG pour les previews et le rendre accéssible qu'au personne autorisé avec une validation via token depuis l'url.