Inertia js est une couche de liaison qui vous permet de construire une application monopage (SPA) moderne avec Vue ou React au-dessus de votre application Laravel, sans écrire d'API REST ou GraphQL distincte. Dans l'approche classique, le backend est une API autonome, le frontend la consomme avec fetch, vous jonglez avec des jetons pour l'authentification et vous finissez par écrire deux fois la même logique de validation. Inertia supprime cette duplication : vos contrôleurs renvoient un nom de composant et des données (props) au lieu de HTML, et le navigateur affiche ce composant sans rechargement complet de la page.
Qu'est-ce qu'Inertia.js exactement ?
Inertia n'est pas un framework ; on l'appelle souvent « le framework sans framework ». Côté serveur, vous continuez à utiliser vos routes et contrôleurs Laravel exactement comme avant. La différence : lorsque vous renvoyez une page, vous appelez Inertia::render('Users/Index', [...]) au lieu d'une vue Blade. À la première requête, le serveur envoie un document HTML complet ; pour chaque navigation suivante, Inertia ne renvoie que du JSON via XHR en arrière-plan et le routeur côté client remplace le composant. L'utilisateur vit une expérience SPA pendant que vous continuez à écrire une application routée côté serveur.
Il y a trois pièces essentielles :
- Un adaptateur serveur — le paquet officiel
inertiajs/inertia-laravelpour Laravel. - Un adaptateur client —
@inertiajs/vue3/@inertiajs/reactpour Vue 3, React ou Svelte. - Un outil de build — Vite, qui est la valeur par défaut de Laravel.
Installation dans un nouveau projet Laravel
Le moyen le plus rapide est d'utiliser les kits de démarrage officiels de Laravel, qui livrent Inertia + Vue ou React préconfigurés. Mais l'ajouter manuellement à un projet existant est tout aussi simple. Installez d'abord le paquet serveur :
composer require inertiajs/inertia-laravel
php artisan inertia:middlewareLa commande inertia:middleware génère le middleware HandleInertiaRequests ; enregistrez-le dans votre groupe de middleware web dans bootstrap/app.php. Préparez ensuite le gabarit Blade racine — c'est l'unique squelette HTML de l'application. Dans resources/views/app.blade.php :
<!DOCTYPE html>
<html>
<head>
@vite(['resources/js/app.js'])
@inertiaHead
</head>
<body>
@inertia
</body>
</html>Brancher le côté client
Poursuivons avec un exemple Vue. Installez les paquets NPM et créez le fichier d'entrée :
npm install @inertiajs/vue3 vue
npm install --save-dev @vitejs/plugin-vueDans resources/js/app.js, démarrez l'application Inertia :
import { createApp, h } from 'vue'
import { createInertiaApp } from '@inertiajs/vue3'
createInertiaApp({
resolve: name =>
import(`./Pages/${name}.vue`),
setup({ el, App, props, plugin }) {
createApp({ render: () => h(App, props) })
.use(plugin)
.mount(el)
},
})Si vous utilisez React, la logique est la même ; vous importez simplement le paquet @inertiajs/react et un setup qui monte avec createRoot. La fonction resolve associe le nom de composant venant du contrôleur (p. ex. Users/Index) au fichier réel dans le dossier Pages.
Renvoyer une page depuis un contrôleur
Voici la bonne partie : il n'y a plus de ressource JSON, de sérialiseur ni de route API distincte. Un contrôleur renvoie directement un composant et ses props.
use Inertia\Inertia;
class UserController extends Controller
{
public function index()
{
return Inertia::render('Users/Index', [
'users' => User::query()
->select('id', 'name', 'email')
->get(),
]);
}
}De l'autre côté, le composant resources/js/Pages/Users/Index.vue reçoit cette prop :
<script setup>
import { Link } from '@inertiajs/vue3'
defineProps({ users: Array })
</script>
<template>
<ul>
<li v-for="user in users" :key="user.id">
<Link :href="`/users/${user.id}`">{{ user.name }}</Link>
</li>
</ul>
</template>Le composant <Link> produit un <a> ordinaire mais intercepte le clic et effectue une visite Inertia au lieu d'un rechargement complet de la page. Pour soumettre des formulaires, il existe l'assistant useForm ; il récupère automatiquement les erreurs de validation depuis le sac d'erreurs de session de Laravel et les expose dans form.errors.
Données partagées, SSR et autres atouts
La méthode share() du middleware HandleInertiaRequests vous permet de définir des props globales transmises automatiquement à chaque page — idéal pour l'utilisateur authentifié, les messages flash ou les données de permission. Si le SEO ou la performance au premier chargement sont cruciaux, vous pouvez activer le rendu côté serveur (SSR) d'Inertia ; php artisan inertia:start-ssr lance un processus Node qui pré-rend la page sur le serveur. Avec des props évaluées paresseusement (Inertia::lazy()) et des rechargements partiels (l'option only), vous réduisez le trafic réseau en n'envoyant que les données réellement nécessaires.
Le compromis fondamental d'Inertia est le suivant : vous n'obtenez pas une API réellement découplée. Si vous devez un jour exposer le même backend à une application mobile ou à des intégrations tierces, vous devrez tout de même écrire une couche d'API. Mais pour les applications dont le seul consommateur est leur propre frontend web, Inertia élimine une quantité substantielle de code dupliqué.
Questions fréquentes
Inertia.js remplace-t-il une API distincte ?
Pour votre frontend web, oui — comme les contrôleurs affichent directement des composants, vous n'avez pas besoin d'une couche REST/GraphQL séparée. Mais si vous devez servir les mêmes données à d'autres clients comme une application mobile, vous devrez tout de même écrire une API conventionnelle.
Dois-je choisir Vue ou React ?
Les deux sont officiellement pris en charge et le côté serveur d'Inertia est identique. Le choix dépend de l'expérience de votre équipe ; la logique et l'API restent presque identiques, seule la syntaxe des composants change.
Est-ce bon pour le SEO ?
Le rendu côté client par défaut peut suffire aux moteurs de recherche, mais si vous voulez une garantie, activez le mode SSR d'Inertia ; le premier HTML de la page est alors produit sur le serveur et les robots voient le contenu complet.
Vous voulez construire un SPA moderne ou migrer un projet Laravel existant vers Inertia ? Je peux vous aider de bout en bout, de l'architecture backend à l'interface Vue/React. Contactez-moi et parlons de votre projet.