D'un monolithe legacy à un SaaS moderne : livraison 5× plus rapide

Le contexte

ProjectFlow est une plateforme SaaS de gestion de projets comptant 15 000 utilisateurs et 8 M$ d’ARR. Bâtie en 2014 sur un monolithe Ruby on Rails, elle portait dix ans de dette technique : temps de chargement de 4 secondes, absence de fonctionnalités temps réel, cycles de livraison de deux semaines et incidents de production récurrents.

Les conséquences étaient mesurables : un taux de churn mensuel de 8 % (contre 5 % pour le marché), des contrats perdus face à des concurrents plus agiles, et une équipe d’ingénierie dont le moral était au plus bas. Le recrutement devenait difficile — les candidats déclinaient face à un stack vieillissant.

L’enjeu : moderniser sans réécrire de zéro, et sans perturber les 15 000 utilisateurs existants.

Notre approche

Nous avons adopté le pattern Strangler Fig — un remplacement progressif du monolithe par des services modernes, tout en maintenant le système existant en production.

Phase 1 — Fondations (Sem. 1-4)

Le nouveau socle technique a été défini : Next.js 15 avec React 19 Server Components pour le frontend, TypeScript pour la sûreté de type, Tailwind CSS pour le développement rapide, PostgreSQL (migration depuis MySQL) et Redis pour le temps réel.

L’analyse du trafic a permis de prioriser la modernisation par impact : le tableau de bord des tâches (40 % du trafic) et la vue projet (25 %) ont été ciblés en premier.

Phase 2 — Réécriture du tableau de bord (Sem. 5-8)

Le tableau de bord — cœur de l’application — a été entièrement reconstruit avec les Server Components de React 19. Le rendu côté serveur avec streaming et Suspense boundaries a permis d’atteindre un temps de chargement de 0,9 seconde (contre 4,2 s auparavant).

Les interactions utilisateur ont été repensées avec les Server Actions et les transitions optimistes : chaque modification (statut, assignation, priorité) est reflétée instantanément côté client avant confirmation serveur.

Phase 3 — Collaboration temps réel (Sem. 9-12)

La fonctionnalité la plus demandée par les utilisateurs — et la plus redoutée par l’équipe legacy — a été implémentée : la collaboration en temps réel via WebSockets et Redis Pub/Sub.

Présence des utilisateurs, mises à jour instantanées des tâches, notifications en direct — le tout avec des mises à jour optimistes grâce au hook useOptimistic de React 19, garantissant une expérience fluide même en cas de latence réseau.

Phase 4 — Migration et coexistence (Sem. 13-16)

Un reverse proxy a assuré la coexistence entre l’ancien et le nouveau système : les routes modernisées (dashboard, projets, API) étaient dirigées vers Next.js, tandis que les fonctions non encore migrées (admin, facturation) restaient sur Rails.

L’authentification a été partagée entre les deux systèmes via Redis, assurant une session unique transparente pour l’utilisateur. Côté déploiement, un pipeline CI/CD automatisé avec GitHub Actions et Vercel a permis de passer à plus de 10 déploiements par jour avec rollback instantané.

Résultats

Performance — Temps de chargement réduit de 75 % sur les pages principales. Core Web Vitals transformés : LCP de 4,5 s à 1,2 s, FID de 180 ms à 45 ms, CLS de 0,25 à 0,02. Score Lighthouse passé de 62 à 98.

Vélocité de livraison — Développement d’une fonctionnalité : de 2 semaines à 2 jours. Fréquence de déploiement : de toutes les 2 semaines à 10+ par jour. Couverture de tests : de 35 % à 85 %.

Impact business — Churn mensuel réduit de 8 % à 5,2 % (-23 %). NPS passé de 32 à 58. Croissance de l’ARR accélérée de 15 % à 35 %. Nouveaux clients : +40 %.

Équipe — Satisfaction des ingénieurs : de 5,2 à 8,9/10. Temps d’intégration d’un nouveau développeur : de 4 semaines à 3 jours. Cinq ingénieurs seniors recrutés avec succès, attirés par le stack moderne.

La modernisation a transformé ProjectFlow d’un suiveur en un leader du marché en matière d’innovation produit — sans jamais interrompre le service.

Enseignements

1. Le Strangler Fig réduit le risque — Migrer progressivement est plus sûr qu’une réécriture totale et permet de valider chaque étape
2. La performance réduit le churn — 75 % de pages plus rapides ont eu un impact direct et mesurable sur la rétention
3. L’expérience développeur nourrit la vélocité — Des outils modernes produisent une équipe plus productive et plus engagée
4. Le temps réel n’est plus optionnel — Les utilisateurs attendent des mises à jour instantanées ; c’est devenu un standard
5. TypeScript prévient les incidents — 40 % d’incidents de production en moins après la migration