Optimisation SEO d'une SPA React – Génération de HTML Dynamique

Nous disposons d'une application React (SPA) utilisant Vite comme bundler, React Router 6 pour le routing et React Helmet Async pour la gestion des meta tags SEO. L’application est actuellement déployée sur Hostinger.

Problématique
Actuellement, l’application génère un fichier HTML statique unique pour toutes les routes, ce qui limite son référencement naturel. Nous recherchons une solution permettant de générer un HTML dynamique, spécifique à chaque page, sans refonte complète ni changement de stack technique.

Objectifs

Génération de HTML par route :
Meta tags dynamiques
Contenu initial optimisé (SSR/SSG)
Structure SEO améliorée
Maintien des performances : Conserver l’expérience utilisateur d’une SPA sans impact négatif sur les performances.
Stack Technique à Conserver

Frontend : React 18
Bundler : Vite 5
Router : React Router 6
Hébergement : Hostinger
Routes Critiques pour le SEO

typescript
interface Routes {
home: "/",
companies: "/entreprises",
companyProfile: "/entreprises/:name/:postalCode/:siren",
blog: "/blog",
blogPost: "/blog/:slug",
map: "/carte",
region: "/carte/:region"
}

Solution Recherchée
Nous recherchons une solution technique qui :

Conserve l’architecture et la stack actuelle
Génère du HTML dynamique par route
S’intègre parfaitement avec le déploiement existant sur Netlify
Maintienne l’expérience utilisateur d’une SPA
Ne nécessite pas une refonte majeure de l’application
Contraintes Techniques

Aucune migration vers Next.js, Remix ou autres frameworks similaires
Conservation de la structure de code existante
Compatibilité avec le système de build Vite
Déploiement sur Hostinger
Préservation des performances
Points d’Attention

Gestion du cache et revalidation des pages
Temps de build raisonnable
Respect des standards SEO (meta tags, structured data)
Maintien des fonctionnalités dynamiques, notamment pour la gestion des routes dynamiques
Ressources Disponibles

Code source complet
Configurations Vite et Hostinger
Accès aux APIs et à la base de données

Le développeur devra proposer une solution qui s’intègre dans l’architecture actuelle tout en permettant la génération de HTML dynamique par page afin d’améliorer le référencement naturel de l’application.