Inertia js ist eine Verbindungsschicht, mit der du eine moderne Single-Page-Anwendung (SPA) mit Vue oder React auf deiner Laravel-App aufbaust, ohne eine separate REST- oder GraphQL-API zu schreiben. Im klassischen Ansatz ist das Backend eine eigenständige API, das Frontend konsumiert sie per fetch, du jonglierst mit Tokens für die Authentifizierung und schreibst am Ende dieselbe Validierungslogik zweimal. Inertia beseitigt diese Doppelung: Deine Controller geben einen Komponentennamen plus Daten (Props) statt HTML zurück, und der Browser rendert diese Komponente ohne vollständiges Neuladen der Seite.
Was genau ist Inertia.js?
Inertia ist kein Framework; es wird oft „das Framework ohne Framework" genannt. Auf der Serverseite nutzt du deine Laravel-Routen und -Controller genau wie zuvor. Der Unterschied: Wenn du eine Seite zurückgibst, rufst du Inertia::render('Users/Index', [...]) statt einer Blade-View auf. Bei der ersten Anfrage sendet der Server ein vollständiges HTML-Dokument; bei jeder folgenden Navigation gibt Inertia im Hintergrund nur JSON per XHR zurück und der clientseitige Router tauscht die Komponente aus. Der Nutzer erlebt eine SPA, während du weiterhin eine serverseitig geroutete App schreibst.
Es gibt drei Kernbestandteile:
- Ein Server-Adapter — das offizielle Paket
inertiajs/inertia-laravelfür Laravel. - Ein Client-Adapter —
@inertiajs/vue3/@inertiajs/reactfür Vue 3, React oder Svelte. - Ein Build-Tool — Vite, der Standard von Laravel.
Installation in einem neuen Laravel-Projekt
Der schnellste Weg ist die Verwendung von Laravels offiziellen Starter-Kits, die Inertia + Vue oder React vorkonfiguriert mitbringen. Aber auch das manuelle Hinzufügen zu einem bestehenden Projekt ist unkompliziert. Installiere zuerst das Server-Paket:
composer require inertiajs/inertia-laravel
php artisan inertia:middlewareDer Befehl inertia:middleware erzeugt die Middleware HandleInertiaRequests; registriere sie in deiner Web-Middleware-Gruppe in bootstrap/app.php. Bereite dann das Root-Blade-Template vor — es ist das einzige HTML-Gerüst der App. In resources/views/app.blade.php:
<!DOCTYPE html>
<html>
<head>
@vite(['resources/js/app.js'])
@inertiaHead
</head>
<body>
@inertia
</body>
</html>Die Clientseite anbinden
Fahren wir mit einem Vue-Beispiel fort. Installiere die NPM-Pakete und lege die Einstiegsdatei an:
npm install @inertiajs/vue3 vue
npm install --save-dev @vitejs/plugin-vueStarte in resources/js/app.js die Inertia-App:
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)
},
})Wenn du React nutzt, ist die Logik dieselbe; du ziehst lediglich das Paket @inertiajs/react heran und ein setup, das mit createRoot mountet. Die resolve-Funktion ordnet den vom Controller kommenden Komponentennamen (z. B. Users/Index) der tatsächlichen Datei im Ordner Pages zu.
Eine Seite aus einem Controller zurückgeben
Das ist der schöne Teil: Es gibt keine JSON-Resource, keinen Serializer und keine separate API-Route mehr. Ein Controller gibt direkt eine Komponente und ihre Props zurück.
use Inertia\Inertia;
class UserController extends Controller
{
public function index()
{
return Inertia::render('Users/Index', [
'users' => User::query()
->select('id', 'name', 'email')
->get(),
]);
}
}Auf der anderen Seite erhält die Komponente resources/js/Pages/Users/Index.vue diese 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>Die Komponente <Link> rendert ein gewöhnliches <a>, fängt aber den Klick ab und führt einen Inertia-Besuch statt eines vollständigen Seiten-Neuladens aus. Zum Absenden von Formularen gibt es den Helfer useForm; er holt Validierungsfehler automatisch aus Laravels Session-Error-Bag und stellt sie in form.errors bereit.
Geteilte Daten, SSR und weitere Stärken
Mit der Methode share() in der Middleware HandleInertiaRequests definierst du globale Props, die automatisch an jede Seite fließen — ideal für den angemeldeten Nutzer, Flash-Meldungen oder Berechtigungsdaten. Wenn SEO oder die Ladezeit beim ersten Aufruf entscheidend sind, kannst du Inertias serverseitiges Rendering (SSR) aktivieren; php artisan inertia:start-ssr startet einen Node-Prozess, der die Seite auf dem Server vorrendert. Mit faul ausgewerteten Props (Inertia::lazy()) und partiellen Neuladungen (der Option only) senkst du den Netzwerkverkehr, indem du nur die wirklich benötigten Daten überträgst.
Inertias grundlegender Kompromiss ist dieser: Du erhältst keine echt entkoppelte API. Falls du dasselbe Backend jemals einer mobilen App oder Drittanbieter-Integrationen zugänglich machen musst, wirst du dennoch eine API-Schicht schreiben müssen. Doch für Apps, deren einziger Konsument ihr eigenes Web-Frontend ist, beseitigt Inertia eine beträchtliche Menge an dupliziertem Code.
Häufige Fragen
Ersetzt Inertia.js eine separate API?
Für dein Web-Frontend ja — da Controller direkt Komponenten rendern, brauchst du keine separate REST/GraphQL-Schicht. Aber wenn du dieselben Daten anderen Clients wie einer mobilen App bereitstellen musst, solltest du dennoch eine herkömmliche API schreiben.
Sollte ich Vue oder React wählen?
Beide werden offiziell unterstützt und die Serverseite von Inertia ist identisch. Die Wahl hängt von der Erfahrung deines Teams ab; Logik und API bleiben nahezu eins zu eins, nur die Komponentensyntax ändert sich.
Ist es gut für SEO?
Das standardmäßige clientseitige Rendering kann für Suchmaschinen ausreichen, aber wenn du Sicherheit willst, aktiviere Inertias SSR-Modus; das erste HTML der Seite wird dann auf dem Server erzeugt und Bots sehen den vollständigen Inhalt.
Möchtest du ein modernes SPA bauen oder ein bestehendes Laravel-Projekt zu Inertia migrieren? Ich kann dir von Anfang bis Ende helfen, von der Backend-Architektur bis zur Vue/React-Oberfläche. Nimm Kontakt auf und lass uns über dein Projekt sprechen.