Inertia.js für PHP: Komplettes Tutorial mit Praxisbeispielen

1. Was ist Inertia.js und warum braucht man es?

Inertia.js ist weder ein Framework noch eine Bibliothek zur Erstellung von SPAs (Single Page Applications) im klassischen Sinne. Es ist vielmehr eine "Brücke" oder ein "Adapter", der es ermöglicht, moderne Single-Page-Anwendungen mit einem klassischen serverseitigen Framework (in unserem Fall Laravel auf PHP) und einem beliebigen modernen Frontend-Framework (React, Vue.js oder Svelte) zu erstellen – ohne eine separate REST-API schreiben zu müssen.

Das Hauptproblem, das Inertia.js löst, ist der Verzicht auf den traditionellen Ansatz "Server rendert HTML" oder "Server liefert JSON, Frontend entscheidet selbst, was gerendert wird". Stattdessen bietet Inertia einen dritten Weg: Sie schreiben Controller in PHP wie gewohnt, geben aber statt eines Blade-Templates oder einer JSON-Antwort eine Inertia-Antwort mit Daten und dem Namen einer Komponente zurück. Inertia auf der Client-Seite (JavaScript) fängt diese Antwort ab, findet die passende Komponente (React/Vue) und rendert sie mit den übergebenen Daten. Die Navigation zwischen den Seiten erfolgt ohne vollständiges Neuladen – wie bei einer SPA –, aber das gesamte Routing und die Geschäftslogik bleiben auf dem Server.

Warum ist das sinnvoll? Erstens vereinfacht es die Architektur drastisch: Sie müssen nicht zwei separate Anwendungen (Backend-API und Frontend-SPA) mit doppelter Logik für Authentifizierung und Validierung warten. Zweitens behalten Sie alle Vorteile von Laravel (Eloquent ORM, Blade-Komponenten für E-Mails, Artisan, Middleware) und alle Vorteile von React/Vue (Reaktivität, komponentenbasierter Ansatz, riesiges Ökosystem). Drittens bietet es eine hervorragende Developer Experience (DX): Sie arbeiten in einem Repository, verwenden einen einzigen Router (Laravel), und Inertia verwaltet transparent den Anwendungszustand auf dem Client.

2. Installation

Die Installation besteht aus zwei Teilen: serverseitig (PHP) und clientseitig (JavaScript). Voraussetzung ist, dass Laravel (Version 8, 9, 10 oder 11) bereits installiert ist.

Schritt 1: Serverseitiges Paket installieren (PHP)

Führen Sie im Terminal im Stammverzeichnis Ihres Laravel-Projekts aus:

composer require inertiajs/inertia-laravel

Schritt 2: Clientseitigen Adapter installieren (JavaScript)

Wählen Sie Ihr Frontend-Framework und führen Sie den entsprechenden Befehl aus:

Für React:

npm install @inertiajs/react react react-dom

Für Vue 3:

npm install @inertiajs/vue3 vue

Für Svelte:

npm install @inertiajs/svelte svelte

Schritt 3: Konfiguration veröffentlichen (optional)

php artisan vendor:publish --provider="Inertia\ServiceProvider"

Schritt 4: Root-Template einrichten

Erstellen Sie die Datei resources/views/app.blade.php mit folgendem Inhalt:

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>@yield('title', config('app.name'))</title>
    @viteReactRefresh
    @vite(['resources/js/app.jsx'])
    @inertiaHead
</head>
<body>
    @inertia
</body>
</html>

Die Direktive @inertia markiert die Stelle, an der Inertia Ihre Anwendung einfügt. @inertiaHead dient zur Steuerung der Kopfzeilen aus den Komponenten heraus.

Schritt 5: Vite konfigurieren (falls verwendet)

Fügen Sie in der Datei vite.config.js das Plugin für React oder Vue hinzu:

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import react from '@vitejs/plugin-react'; // oder @vitejs/plugin-vue

export default defineConfig({
    plugins: [
        laravel({
            input: 'resources/