Expertise

Développeur Inertia.js freelance

Applications modernes avec Inertia.js (Laravel + React)

Vous voulez une interface moderne et réactive sans payer le prix d'une API séparée ? Inertia relie votre back-end Laravel à un front React, et je m'en sers tous les jours, à commencer par ce portfolio.

Kylian Bellegarde, développeur web freelance en Martinique, travaillant sur une application Laravel et React avec Inertia.js
Interfaces SPA fluides sans API REST à maintenir.
Routing et contrôleurs côté serveur, composants React côté client.
SEO possible via SSR Inertia, sécurité et sessions Laravel natives.

Inertia.js relie un back-end Laravel ou Symfony à un front React (ou Vue) sans construire ni maintenir une API séparée. Résultat : des interfaces modernes et fluides type SPA, avec la simplicité d'une application serveur classique. C'est la stack de ce portfolio.

Quand vous voulez une interface qui réagit au quart de tour (pas de rechargement de page, des transitions fluides, des formulaires instantanés), le réflexe habituel est de construire une application en deux morceaux : une API d'un côté, une SPA React ou Vue de l'autre. Ça marche, mais ça double le travail. Vous maintenez deux projets, vous versionnez des endpoints, vous réécrivez côté front une partie de la logique qui existe déjà côté serveur, et vous passez un temps fou à gérer l'authentification par jetons.

Inertia supprime cette couche intermédiaire. Vos contrôleurs Laravel renvoient directement les données aux composants React de la page, comme s'ils renvoyaient une vue Blade, mais le rendu se fait en JavaScript côté navigateur. Concrètement : vous écrivez une route serveur, un contrôleur, un composant de page, et c'est tout. Pas de fetch à câbler à la main, pas de schéma d'API à documenter, pas de duplication des règles métier.

Le mécanisme est simple à se représenter. Au tout premier chargement, le serveur renvoie une page HTML normale qui amorce l'application. Ensuite, chaque clic sur un lien Inertia déclenche une requête en arrière-plan : le serveur répond avec les seules données de la nouvelle page, au format JSON, et le front remplace le composant à l'écran sans recharger le navigateur. C'est ce qui donne cette sensation d'instantanéité, tout en gardant des URL réelles, le bouton retour qui fonctionne et des pages partageables. On peut même ne recharger qu'une partie des données d'un écran, ou les précharger au survol d'un lien, pour que la navigation paraisse immédiate.

Le résultat est une application qui se comporte comme une SPA pour votre utilisateur (navigation instantanée, état préservé, zéro flash blanc entre les pages) tout en se développant comme une application serveur classique. C'est précisément cette combinaison qui rend Inertia productif : on garde le confort de Laravel et on gagne la modernité de React, sans le coût d'architecture qui va normalement avec.

C'est aussi la stack sur laquelle ce site tourne. Quand je vous recommande Inertia, ce n'est pas un pari : c'est l'outil que j'utilise pour mon propre travail, et que je connais dans ses détails comme dans ses limites.

Le point que je trouve le plus sous-estimé, c'est la sécurité. Avec une API + SPA séparée, vous devez gérer l'authentification par jetons (souvent du JWT) : où vous les stockez, quand ils expirent, comment vous les rafraîchissez, comment vous vous protégez du vol de jeton. C'est une source classique de failles et de bugs subtils. Avec Inertia, on garde l'authentification et les sessions natives de Laravel, exactement comme sur une application serveur. Les mêmes mécanismes éprouvés (cookies sécurisés, protection CSRF, intergiciels) continuent de s'appliquer. Moins de code à écrire, et moins de surface d'attaque.

La validation suit la même logique. Vous validez les formulaires côté serveur avec les règles Laravel que vous connaissez déjà, et Inertia ramène automatiquement les erreurs dans vos composants React, prêtes à être affichées sous chaque champ. Le composant de formulaire fourni par Inertia gère pour vous l'état de saisie, l'indicateur d'envoi en cours et la réinitialisation après succès : vous écrivez très peu de code de plomberie, et vous vous concentrez sur l'écran. Pas besoin de réimplémenter la validation en double. Une seule source de vérité, côté serveur, là où elle doit être.

J'ajoute du TypeScript par-dessus, ce qui permet de partager les types entre le back et le front : la forme des données qu'un contrôleur envoie correspond à ce que le composant attend, vérifié à la compilation. Une bonne partie des bugs d'intégration disparaît avant même de lancer l'application. Quand un champ change de nom ou de type côté serveur, l'éditeur me signale immédiatement les écrans à mettre à jour, au lieu de me laisser découvrir le problème en production.

Inertia sait aussi n'envoyer que ce qui est nécessaire. Les données lourdes ou secondaires d'un écran peuvent être chargées à la demande plutôt qu'à chaque visite, et le contenu commun à toutes les pages (l'utilisateur connecté, les messages flash, le thème) est partagé une fois pour toutes. On évite de transporter inutilement des kilo-octets à chaque navigation, ce qui garde l'application légère même quand elle grossit.

Au quotidien, ça veut dire un seul dépôt cohérent, un seul déploiement, une seule logique métier. Pour un freelance comme pour votre équipe, c'est moins de pièces mobiles à comprendre et à maintenir dans le temps. La maintenance, c'est un de mes quatre piliers, et Inertia joue clairement dans le bon sens là-dessus : un bug se corrige à un seul endroit, une montée de version se gère sur un seul projet, et la personne qui reprend le code n'a pas deux mondes à apprendre.

Je commence toujours par le cadrage : Laravel ou Symfony selon l'existant, React (mon terrain principal, en TypeScript) ou Vue selon vos préférences, et surtout la question du SSR pour le SEO, qu'on tranche dès le départ. Poser ces choix tôt évite de revenir en arrière plus tard. De là, je monte le squelette de l'application : le routing serveur, un layout persistant qui reste en place pendant que les pages défilent, les composants de base et les types partagés entre back et front.

Ensuite, le développement se fait page par page, écran par écran. C'est un rythme qui vous donne de la visibilité : vous voyez l'application se remplir progressivement, vous pouvez tester chaque parcours dès qu'il est prêt, et on ajuste au fil de l'eau plutôt que de tout découvrir à la fin. Chaque écran arrive avec ses formulaires validés côté serveur, ses états de chargement soignés et ses transitions, pour que l'ensemble reste cohérent et agréable à utiliser.

Concrètement, Inertia est mon choix par défaut pour tout ce qui est applicatif et riche en interactions : back-offices, tableaux de bord, espaces clients, applications internes, produits SaaS. Dès qu'il y a beaucoup d'écrans, de formulaires et d'états à manipuler, et que vous voulez une expérience fluide sans vous lancer dans une architecture lourde, c'est souvent le meilleur compromis. Un back-office de gestion, un espace où vos clients suivent leurs commandes ou leurs documents, un outil métier qui remplace un tableur bricolé : ce sont les terrains où Inertia donne le plus.

C'est aussi une excellente voie pour moderniser une application Laravel existante sans tout casser. On peut basculer certaines parties en Inertia progressivement, écran par écran, en gardant le reste du back-end intact. Vous n'avez pas à choisir entre vivre avec une interface vieillissante et financer une réécriture complète : on avance par étapes, on livre de la valeur à chaque palier, et le risque reste maîtrisé. Le projet se termine par l'activation du SSR si le SEO l'exige, un build optimisé et une mise en production supervisée.

La question qui revient toujours, c'est le référencement. Par défaut, une page Inertia est rendue en JavaScript, ce qui n'est pas idéal pour une page publique qui doit être parfaitement indexée. La réponse, c'est le rendu côté serveur (SSR) d'Inertia : le serveur génère le HTML complet de la page au premier chargement, les robots et les visiteurs reçoivent un contenu déjà rendu, et l'interactivité React prend le relais ensuite. On l'active quand le SEO l'exige, et on garde de toute façon la main sur les balises de titre, les métadonnées et les données structurées de chaque page.

En pratique, je tranche selon l'usage. Pour une application interne ou un espace client derrière une connexion, le SEO n'a aucun intérêt : on n'active pas le SSR, et c'est plus simple. Pour un site public où le référencement compte, j'active le SSR et je soigne le rendu serveur, les balises et les performances. Le choix se fait au cadrage, pas à l'aveugle : on ne paie la complexité du SSR que là où elle rapporte vraiment.

La performance compte autant que le balisage, pour Google comme pour vos visiteurs. Une page rendue côté serveur s'affiche vite, et la navigation interne d'Inertia évite les rechargements complets : on garde un site rapide, ce qui aide à la fois le référencement et le taux de conversion. Je vérifie les Core Web Vitals et l'accessibilité au navigateur, parce qu'un bon positionnement passe aujourd'hui par une expérience réellement fluide, pas seulement par des mots-clés bien placés.

Si votre projet vise une clientèle locale, en Martinique ou plus largement aux Antilles, le SEO reste tout à fait jouable avec Inertia : une application bien rendue côté serveur, rapide et accessible, se positionne aussi bien qu'un site classique. L'enjeu n'est pas la techno, c'est de l'activer au bon endroit et de ne pas la subir. Et comme je suis basé sur place, on peut échanger simplement, dans le même fuseau, sur ce que votre activité a réellement besoin de mettre en avant.

Inertia 3Version utilisée en production
Laravel + ReactBack-end et front d'une même base
TypeScriptTypes partagés back et front
SSR au besoinRendu serveur pour le SEO

Les avantages

  • Une seule base de code cohérente back + front : pas d'API séparée à construire, versionner et documenter.
  • Authentification et sessions Laravel natives, sans jetons JWT à orchestrer : plus simple et plus sûr.
  • Validation des formulaires côté serveur, avec les erreurs ramenées automatiquement dans les composants React.
  • Expérience SPA fluide (navigation instantanée, état préservé) sans la complexité d'architecture habituelle.
  • Types partagés entre back et front via TypeScript : les bugs d'intégration sautent aux yeux avant la production.
  • Adoption progressive possible sur un projet Laravel existant, écran par écran, sans tout réécrire.
  • SEO assuré quand il le faut grâce au rendu côté serveur (SSR) d'Inertia.

Les limites à connaître

  • Inertia suppose un back-end qui rend les pages (Laravel, Symfony) : ce n'est pas la bonne brique pour un front purement statique ou un site vitrine simple.
  • Si plusieurs clients doivent consommer les mêmes données (une app mobile native en plus du web), une vraie API séparée reste plus adaptée.
  • Le SEO demande d'activer et de maintenir le SSR : une étape en plus à ne pas négliger sur un site public.
  • Pour des interfaces extrêmement spécifiques ou un état client très complexe, une SPA dédiée à part peut offrir plus de latitude.

Les deux approches mènent à une interface moderne. La vraie question, c'est le nombre de clients qui consomment vos données et le niveau de complexité que vous acceptez de maintenir. Voici comment je tranche.

Choisissez Inertia si…

  • Votre application est consommée uniquement par le web : un seul front, pas d'app mobile native à alimenter.
  • Vous voulez livrer vite une interface riche (back-office, dashboard, espace client, SaaS) sans doubler le travail.
  • Vous tenez à garder l'authentification, les sessions et la validation Laravel, éprouvées et sûres.
  • Vous modernisez une application Laravel existante et voulez avancer progressivement, sans big bang.
  • Vous préférez un seul dépôt, un seul déploiement et une seule logique métier à maintenir dans le temps.

Préférez autre chose si…

  • Plusieurs clients consomment les mêmes données : web plus application mobile native, par exemple.
  • Vous exposez une API publique destinée à des partenaires ou des intégrations tierces.
  • Votre interface est si spécifique ou si lourde en état client qu'elle justifie une SPA totalement découplée.
  • Votre équipe front et votre équipe back sont distinctes et veulent travailler sur des dépôts indépendants.
  • Le back-end n'est pas en PHP : sans Laravel ni Symfony pour rendre les pages, Inertia perd son intérêt.

  • Back-offices et dashboards riches et réactifs
  • Espaces clients et applications SaaS
  • Refonte d'interfaces Laravel sans réécrire le back-end
  • Applications internes à forte interactivité

Le meilleur des deux mondes

L'expérience d'une SPA React, la simplicité d'une app serveur Laravel. Pas d'API à construire, pas de logique dupliquée.

Moins de complexité

Pas d'état serveur à gérer côté client, pas de JWT à orchestrer : on garde l'auth et les sessions Laravel, c'est plus simple et plus sûr.

Productivité

On livre plus vite des interfaces modernes, avec une seule base de code cohérente back + front, typée de bout en bout.

01

Cadrage

Laravel ou Symfony, React ou Vue, besoin de SSR pour le SEO : on pose la stack adaptée.

02

Squelette applicatif

Routing serveur, layout persistant, composants de base, types partagés back/front.

03

Pages & interactions

Développement page par page, formulaires avec validation serveur, transitions fluides.

04

SSR & déploiement

Activation du SSR si le SEO l'exige, build optimisé, mise en production supervisée.

FAQ

Non, et c'est tout l'intérêt : Inertia transmet les données du contrôleur directement aux composants React, sans construire ni versionner une API séparée.

Un projet Inertia ? Parlons-en.

Je cadre votre besoin et vous dis honnêtement si Inertia est le bon choix pour votre projet.