TECHNOLOGIES / Inertia.js
Inertia.js : le pont entre Symfony et Vue.js
Inertia.js connecte notre backend Symfony à des interfaces Vue.js modernes, sans construire d'API REST intermédiaire. Le contrôleur Symfony retourne directement une page Vue.js, comme il retournerait un template Twig.
Cette fiche explique comment nous capitalisons sur les composants Symfony existants plutôt que de les redévelopper côté frontend, et détaille notre intégration via inertia-bundle et Vite.
POURQUOI INERTIA.JS
Capitaliser sur les composants Symfony existants
Inertia.js permet de construire des applications monopage (SPA) en utilisant les contrôleurs et le routing côté serveur classiques, sans construire d'API REST séparée.
Cette approche permet de capitaliser sur des composants Symfony déjà robustes et éprouvés : le composant Security pour l'authentification et l'autorisation (voters, rôles, firewalls), le composant Form pour la validation des données saisies, et le composant Routing pour la génération des URLs. Toute cette logique reste centralisée côté Symfony.
Avec une architecture API REST + SPA classique, ces règles doivent être redéveloppées une seconde fois côté frontend pour l'expérience utilisateur. Inertia.js évite cette duplication : plus besoin de coder et maintenir la même logique de sécurité et de validation dans deux projets séparés.
AVANTAGES
Ce qu'Inertia.js apporte concrètement
Les fonctionnalités qui font d'Inertia.js un vrai gain de productivité au quotidien, pas seulement un pont technique entre Symfony et Vue.js.
Routing côté serveur
Le routing, les contrôleurs, les middlewares, l'authentification et l'accès aux données restent sur votre backend Symfony, là où ils doivent être.
Formulaires
Une gestion simplifiée des soumissions de formulaire : validation, upload de fichiers et gestion des erreurs typée, connectées directement à vos contrôleurs Symfony.
SEO et rendu côté serveur
Profitez des bénéfices de vitesse et de référencement du rendu côté serveur (SSR), disponible nativement avec Inertia.js.
Rechargements partiels
Seules les données modifiées sont rafraîchies : l'application reste réactive, sans rechargement complet de la page.
Données partagées
Les informations communes à toutes les pages (utilisateur connecté, notifications, paramètres) sont partagées automatiquement, sans les redéclarer dans chaque contrôleur.
Polling
Construisez des fonctionnalités temps réel grâce au polling intégré : les données de la page restent à jour à intervalle régulier.
Versioning des assets
Le versioning des fichiers JS et CSS est géré automatiquement : vos utilisateurs récupèrent toujours la dernière version après un déploiement.
État côté serveur
Le backend Symfony reste la source de vérité unique : Inertia.js synchronise automatiquement l'état entre le serveur et l'interface.
Authentification
Aucune duplication de la sécurité : connexions, redirections et autorisations restent gérées côté backend, comme pour le reste de l'application.
Prefetching
La navigation est quasi instantanée grâce au préchargement des pages au survol ou au clic sur un lien Inertia.
Props différées
Priorisez la performance en différant l'envoi des données non essentielles, pour un premier rendu de page plus rapide.
Scroll infini
Implémentez un scroll infini avec l'une des intégrations les plus simples du marché, sans bibliothèque tierce.
NOTRE USAGE
Comment nous utilisons Inertia.js chez SmartBooster
Notre intégration s'appuie sur un bundle Symfony dédié et sur l'écosystème Vue.js et Vite.
Intégration via inertia-bundle
Nous utilisons le bundle Symfony inertia-bundle (skipthedragon/inertia-bundle), qui fournit l'adaptateur serveur entre nos contrôleurs Symfony et le protocole Inertia.js.
Vues écrites directement en .vue
Les vues ne sont plus des templates Twig : elles sont écrites directement en composants .vue, avec toute la réactivité et l'écosystème Vue.js à disposition, sans couche de traduction entre le backend et le rendu.
Bundling avec Vite
Le build des assets et le Hot Module Replacement des composants .vue sont gérés par Vite, intégré nativement à Inertia.js depuis sa version 3.x.
HISTORIQUE
Historique des versions Inertia.js
Les trois versions majeures d'Inertia.js et leurs apports respectifs.
| Version | Date | Nouveautés clés |
|---|---|---|
| 3.x Recommandée | 26 mars 2026 | Client HTTP natif, SSR simplifié et mises à jour optimistes : Remplacement d'Axios par un client HTTP natif plus léger, avec le nouveau hook useHttp pour des requêtes hors navigation Inertia et des mises à jour optimistes (interface mise à jour avant la réponse serveur, avec rollback automatique en cas d'échec). Le plugin Vite officiel simplifie la résolution des pages et le SSR, qui fonctionne désormais nativement en développement sans serveur Node.js séparé. Nouveau hook useLayoutProps pour partager des données entre pages et layouts persistants. Voir la release → - Voir le guide de mise à jour → |
| 2.x Support actif jusqu'en sept. 2026 | 13 décembre 2024 | Architecture asynchrone : polling, prefetching et props différées : Réécriture du cœur de la librairie pour supporter les requêtes asynchrones, ce qui permet le polling, le prefetching, les props différées, le scroll infini et le chargement paresseux des données au scroll. Les rechargements partiels deviennent asynchrones (auparavant synchrones), et le chiffrement de l'historique navigateur protège les données de page après déconnexion. Bugs corrigés jusqu'au 26 septembre 2026, correctifs de sécurité jusqu'au 26 mars 2027. Voir la release → - Voir le guide de mise à jour → |
| 1.x Obsolète | 14 janvier 2023 | Première version stable : Rebranding des packages (@inertiajs/inertia devient @inertiajs/core), support TypeScript de première classe sur les adaptateurs React, Vue 2 et Vue 3, et rendu côté serveur (SSR) pour Svelte. Voir la release → |
FAQ
Les réponses à vos questions
Et si vous ne trouvez pas ce que vous cherchez, nous serons ravis de vous répondre en direct lors d'un rendez-vous entre humains !
Non, ce n'est pas une alternative à une API REST mais une architecture différente. Une API REST expose des données à consommer par n'importe quel client (application mobile, service tiers, autre frontend). Inertia.js est pertinent quand le frontend est uniquement l'application web elle-même : dans ce cas, construire et maintenir une API REST intermédiaire devient un coût sans bénéfice réel. Si votre projet doit exposer des données à d'autres consommateurs, une API REST classique reste nécessaire en complément.
Oui, Inertia.js fournit des adaptateurs officiels pour Vue.js, React et Svelte. Chez SmartBooster, nous utilisons systématiquement l'adaptateur Vue.js, cohérent avec notre stack frontend historique et notre expertise sur ce framework. Le choix du frontend n'affecte pas les bénéfices côté backend : les composants Symfony (Security, Form, Routing) restent exploités de la même façon quel que soit l'adaptateur choisi.
Non, si le rendu côté serveur (SSR) est activé. Une application Inertia.js sans SSR se comporte comme une SPA classique côté indexation, avec les mêmes limites. Mais Inertia.js propose un SSR natif, simplifié depuis la version 3.x avec le plugin Vite officiel : les pages sont pré-rendues côté serveur avant d'être hydratées côté client, ce qui donne aux moteurs de recherche un contenu HTML complet dès la première requête.
L'authentification reste entièrement gérée côté backend Symfony, via le composant Security : connexions, sessions, redirections et autorisations (voters, rôles, firewalls) fonctionnent exactement comme sur une application Symfony classique avec Twig. Inertia.js ne duplique aucune logique de sécurité côté frontend : le contrôleur décide qui a accès à quoi, et la page Vue.js reçoit simplement le résultat de cette décision.
Non, Inertia.js peut être introduit progressivement sur un projet Symfony existant. Les contrôleurs peuvent continuer à retourner des templates Twig pour certaines pages et des réponses Inertia pour d'autres, page par page. Cette approche permet de migrer les écrans qui bénéficient le plus d'une interface réactive, sans réécrire l'application entière en une seule fois.
Nuxt et Next.js sont des frameworks frontend complets avec leur propre serveur applicatif (routing, data fetching, API routes), pensés pour des projets où le frontend peut vivre indépendamment du backend. Inertia.js n'est pas un framework frontend autonome : c'est un pont qui laisse le routing, les données et la logique métier entièrement du côté du backend Symfony. Le choix dépend du contexte : Nuxt ou Next.js conviennent à un frontend découplé, Inertia.js convient quand Symfony reste le cœur applicatif.
Vous avez un projet ?
Contactez-nous pour savoir comment nous pouvons vous aider.