Migration WordPress vers React + Supabase : retour d'experience

Le contexte du projet

Un client e-commerce avec un site WordPress vieillissant nous a contacte pour une refonte complete. Le site souffrait de performances mediocres (LCP > 6s), de problemes de securite recurrents, et d'une maintenance couteuse.

Pourquoi React + Supabase ?

Les limites de WordPress

• Performance : Plugins lourds, requetes SQL non optimisees
• Securite : Mises a jour constantes, failles plugins
• Scalabilite : Difficile a scaler horizontalement
• DX : Melange PHP/JavaScript peu maintenable

Les avantages de la stack React + Supabase

• Performance : SPA avec code splitting, CDN pour les assets
• Securite : RLS Supabase, pas de serveur a maintenir
• Scalabilite : Serverless, auto-scaling
• DX : TypeScript end-to-end, hot reload

La strategie de migration

Phase 1 : Audit et planification (2 semaines)

1. Inventaire complet des pages et contenus
2. Analyse des redirections necessaires (301)
3. Mapping des URLs WordPress vers les nouvelles routes
4. Export des donnees (posts, pages, medias, meta SEO)

Phase 2 : Infrastructure (1 semaine)

# Setup du projet
npm create vite@latest client -- --template react-ts
cd client
npm install @supabase/supabase-js @tanstack/react-query react-router-dom

Configuration Supabase :

• Tables pour les pages et articles
• Storage pour les medias
• RLS stricte (lecture publique uniquement)
• Edge Functions pour le formulaire de contact

Phase 3 : Migration des donnees (2 semaines)

Le plus gros defi : convertir le contenu WordPress (blocs Gutenberg) en Markdown propre.

// Script de migration (simplifie)
import { parseGutenbergBlocks } from './parsers'
import { wpClient, supabase } from './clients'

async function migratePosts() {
  const posts = await wpClient.posts().perPage(100)

  for (const post of posts) {
    const markdown = parseGutenbergBlocks(post.content.rendered)

    await supabase.from('articles').insert({
      title: post.title.rendered,
      slug: post.slug,
      content: markdown,
      published_at: post.date,
      // ... autres champs
    })
  }
}

Phase 4 : Developpement frontend (4 semaines)

• Design system Tailwind CSS
• Composants reutilisables
• Pages avec TanStack Query
• SEO avec structured data

Phase 5 : Redirections et lancement

// Middleware de redirection
const redirects: Record<string, string> = {
  '/category/tutoriels/': '/blog?category=tutoriels',
  '/wp-content/uploads/*': '/images/*',
  // 200+ redirections...
}

Les resultats

Lecons apprises

1. Les redirections sont critiques : Un oubli = perte de SEO
2. Migrer le contenu prend du temps : Prevoyez le double
3. Tester les URLs : Script de verification automatique indispensable
4. Communiquer avec le client : Formation necessaire sur le nouveau CMS

La migration n'est pas juste technique. C'est un projet de transformation qui implique tout le monde.

Conclusion

La migration a ete un succes avec des performances multiplees par 4 et un cout reduit de 72%. Le client est ravi de la nouvelle experience utilisateur et de la facilite de maintenance.