Inertia js is een verbindingslaag waarmee je een moderne single-page applicatie (SPA) met Vue of React bovenop je Laravel-app bouwt zonder een aparte REST- of GraphQL-API te schrijven. In de klassieke aanpak is de backend een losstaande API, consumeert de frontend die met fetch, jongleer je met tokens voor authenticatie en schrijf je uiteindelijk dezelfde validatielogica twee keer. Inertia verwijdert die duplicatie: je controllers geven een componentnaam plus data (props) terug in plaats van HTML, en de browser rendert dat component zonder een volledige paginaherlading.
Wat is Inertia.js precies?
Inertia is geen framework; het wordt vaak "het framework-loze framework" genoemd. Aan de serverkant blijf je je Laravel-routes en -controllers precies zoals voorheen gebruiken. Het verschil: wanneer je een pagina teruggeeft, roep je Inertia::render('Users/Index', [...]) aan in plaats van een Blade-view. Bij het eerste verzoek stuurt de server een volledig HTML-document; bij elke volgende navigatie geeft Inertia op de achtergrond alleen JSON terug via XHR en wisselt de client-side router het component. De gebruiker krijgt een SPA-ervaring terwijl jij een server-gerouteerde app blijft schrijven.
Er zijn drie kernonderdelen:
- Een serveradapter — het officiële
inertiajs/inertia-laravel-pakket voor Laravel. - Een clientadapter —
@inertiajs/vue3/@inertiajs/reactvoor Vue 3, React of Svelte. - Een buildtool — Vite, de standaard van Laravel.
Installeren in een nieuw Laravel-project
De snelste route is het gebruik van Laravels officiële starter kits, die Inertia + Vue of React vooraf geconfigureerd meeleveren. Maar het handmatig toevoegen aan een bestaand project is even eenvoudig. Installeer eerst het serverpakket:
composer require inertiajs/inertia-laravel
php artisan inertia:middlewareHet commando inertia:middleware genereert de HandleInertiaRequests-middleware; registreer deze in je web-middlewaregroep in bootstrap/app.php. Bereid vervolgens het root-Blade-sjabloon voor — dit is het enige HTML-skelet van de app. In resources/views/app.blade.php:
<!DOCTYPE html>
<html>
<head>
@vite(['resources/js/app.js'])
@inertiaHead
</head>
<body>
@inertia
</body>
</html>De clientkant koppelen
Laten we doorgaan met een Vue-voorbeeld. Installeer de NPM-pakketten en maak het invoerbestand aan:
npm install @inertiajs/vue3 vue
npm install --save-dev @vitejs/plugin-vueStart in resources/js/app.js de Inertia-app op:
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)
},
})Als je React gebruikt is de logica hetzelfde; je haalt simpelweg het @inertiajs/react-pakket binnen en een setup die met createRoot mount. De resolve-functie koppelt de componentnaam die van de controller komt (bijv. Users/Index) aan het echte bestand in de Pages-map.
Een pagina teruggeven vanuit een controller
Dit is het mooie deel: er is geen JSON-resource, serializer of aparte API-route meer. Een controller geeft direct een component en zijn props terug.
use Inertia\Inertia;
class UserController extends Controller
{
public function index()
{
return Inertia::render('Users/Index', [
'users' => User::query()
->select('id', 'name', 'email')
->get(),
]);
}
}Aan de andere kant ontvangt het component resources/js/Pages/Users/Index.vue die 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>Het <Link>-component rendert een gewone <a> maar onderschept de klik en voert een Inertia-bezoek uit in plaats van een volledige paginaverversing. Voor het verzenden van formulieren is er de useForm-helper; deze haalt validatiefouten automatisch op uit Laravels session-errorbag en stelt ze beschikbaar in form.errors.
Gedeelde data, SSR en andere sterke punten
Met de share()-methode in de HandleInertiaRequests-middleware definieer je globale props die automatisch naar elke pagina stromen — ideaal voor de ingelogde gebruiker, flash-berichten of permissiegegevens. Als SEO of de laadtijd van de eerste pagina cruciaal is, kun je Inertia's server-side rendering (SSR) inschakelen; php artisan inertia:start-ssr draait een Node-proces dat de pagina vooraf op de server rendert. Met lui geëvalueerde props (Inertia::lazy()) en gedeeltelijke herladingen (de only-optie) verlaag je het netwerkverkeer door alleen de data te versturen die je echt nodig hebt.
De fundamentele afweging van Inertia is deze: je krijgt geen echt ontkoppelde API. Als je ooit dezelfde backend moet blootstellen aan een mobiele app of integraties van derden, zul je alsnog een API-laag moeten schrijven. Maar voor apps waarvan de enige consument hun eigen webfrontend is, elimineert Inertia een aanzienlijke hoeveelheid dubbele code.
Veelgestelde vragen
Vervangt Inertia.js een aparte API?
Voor je webfrontend, ja — omdat controllers direct componenten renderen, heb je geen aparte REST/GraphQL-laag nodig. Maar als je dezelfde data aan andere clients zoals een mobiele app moet leveren, moet je alsnog een conventionele API schrijven.
Moet ik Vue of React kiezen?
Beide worden officieel ondersteund en de serverkant van Inertia is identiek. De keuze hangt af van de ervaring van je team; de logica en API blijven vrijwel één-op-één, alleen de componentsyntaxis verschilt.
Is het goed voor SEO?
De standaard client-side rendering kan voldoende zijn voor zoekmachines, maar wil je zekerheid, schakel dan Inertia's SSR-modus in; de eerste HTML van de pagina wordt dan op de server geproduceerd en bots zien de volledige inhoud.
Wil je een moderne SPA bouwen of een bestaand Laravel-project naar Inertia migreren? Ik kan je van begin tot eind helpen, van backend-architectuur tot de Vue/React-interface. Neem contact op en laten we het over je project hebben.