Single-Page-Applikationen (SPAs) sind zur modernen Art der Erstellung von Webanwendungen geworden, und Inertia.js ist ein führendes Tool, mit dem Entwickler SPAs sowohl mit clientseitigem als auch mit serverseitigem Rendering erstellen können.
In diesem Artikel werden wir uns ansehen, wie Inertia die Erstellung von SPAs zu einem Kinderspiel macht und wie es viele andere Probleme für Entwickler löst. Außerdem gehen wir auf die wichtigsten Funktionen des Tools ein.
Doch bevor wir beginnen, müssen wir zunächst sicherstellen, dass wir verstehen, wie server- und clientseitige Anwendungen funktionieren.
Was ist Serverseitiges Rendering?
Serverseitiges Rendering (SSR) bedeutet, dass eine Anwendung Webseiteninhalte auf dem Server und nicht im Browser darstellen kann. Wenn ein/e Nutzer/in versucht, example.com zu besuchen, stellt der Browser eine Anfrage an den Server, um alle notwendigen Informationen für die Anzeige dieser speziellen Webseite zu erhalten, und der Server antwortet sofort, indem er dem Browser eine vollständig gerenderte Seite liefert.
Suchmaschinen greifen ein und indizieren die vom Server gelieferten Informationen, bevor sie den Browser erreichen; dies wird als Suchmaschinenoptimierung (SEO) bezeichnet. Der Browser löst dann die JavaScript-Inhalte auf, und die Webseite wird dem Nutzer angezeigt.
Das Problem mit dem SSR-Ansatz ist, dass es lange dauert, bis eine vollständig gerenderte Seite vom Server geladen ist, was kein angenehmes Nutzererlebnis bietet. Aus diesem Grund ziehen Entwickler/innen SPAs und clientseitiges Rendering in Betracht.
Was ist Clientside Rendering?
Beim clientseitigen Rendering erhält der Browser alles, was er zum Rendern der Webseite braucht, von der Client-Seite, anstatt eine vollständig gerenderte Seite vom Server zu erhalten. Wenn die Seite geladen ist, sendet der Browser keine weiteren Anfragen an den Server, wodurch das Surferlebnis extrem schnell wird.
Das clientseitige Rendering hat zur Entwicklung von SPAs beigetragen und das Web revolutioniert. Du kannst eine Website erstellen, bei der die Seite nicht neu geladen werden muss, egal wie viele Links du anklickst. Das macht es für die Nutzer/innen einfach, durch die Website zu navigieren.
Obwohl SPAs fantastisch sind, birgt dieser Ansatz eine Menge Komplexität und Probleme, die wir heute behandeln werden. Inertia löst die meisten dieser Probleme, indem es serverseitige Frameworks effektiv einsetzt. Es kombiniert die besten Eigenschaften von server- und clientseitigen Anwendungen.
Was ist Inertia.js?
Inertia ist kein JavaScript-Framework. Es handelt sich vielmehr um eine Strategie oder Technik zur Entwicklung von SPAs. Sie ermöglicht es dem Entwickler, aktuelle serverseitige Frameworks zu nutzen, um eine moderne SPA zu entwickeln, ohne die damit verbundene Komplexität.
Inertia wurde entwickelt, um die Frameworks, die du bereits verwendest, zu ergänzen und nicht zu ersetzen. Betrachte es als einen hilfreichen Verbündeten, der dir hilft, Aufgaben schneller und effizienter zu erledigen. Es unterstützt derzeit drei Frontend-Frameworks (Vue, React und Svelte) für das Rendering auf der Client-Seite und zwei Backend-Frameworks (Laravel und Rails) für das Rendering auf der Server-Seite.
Für die meisten Laravel-Entwicklerinnen und -Entwickler ist Inertia eine der zuverlässigsten Techniken für den Aufbau von SPAs, da sie damit sowohl Frontend- als auch Backend-Frameworks verbinden können.
Wie funktioniert Inertia.js?
Inertia ähnelt dem Vue Router, da es dir erlaubt, zwischen Seiten zu wechseln, ohne die gesamte Seite neu laden zu müssen. Allerdings arbeitet Inertia synchron mit deinem serverseitigen Framework. Dies ist mit Link möglich, einem Wrapper für das Standard-Anker-Tag. Wenn ein Link angeklickt wird, fängt Inertia das Klickereignis ab und sendet eine XHR-Anfrage an den Server. Der Server erkennt, dass es sich um eine Inertia-Anfrage handelt und gibt eine JSON-Antwort zurück. Diese Antwort enthält den Namen und die Daten der JavaScript-Komponente, woraufhin Inertia auf magische Weise nicht benötigte Komponenten entfernt und durch diejenigen ersetzt, die für den Besuch der neuen Seite erforderlich sind, und den Verlaufsstatus aktualisiert.
Ein tiefer Einblick in die Funktionsweise von Inertia.js
Wenn ein Besucher example.com zum ersten Mal besucht, führt der Browser eine normale Ganzseitenanfrage durch und der Server gibt eine vollständige HTML-Antwort zurück, als ob Inertia nicht existieren würde. Diese HTML-Antwort enthält alle Website-Assets (CSS, JavaScript), aber auch ein zusätzliches Asset für Inertia, nämlich das Stammverzeichnis div mit dem data-page -Attribut, das JSON-Daten für die Ausgangsseite enthält. Inertia nutzt diese JSON-Daten dann, um das Frontend-Framework zu starten und die Startseite anzuzeigen.
Sobald die App hochgefahren ist, wird jede Route, die der Nutzer innerhalb der gleichen Domain mit Link besucht, eine XHR-Anfrage mit dem X-Inertia Header sein. Dieser teilt dem Server mit, dass es sich um eine Inertia-Anfrage handelt.
Die Rückmeldung erfolgt als JSON-Antwort mit dem Seiteninhalt und nicht als vollständige HTML-Antwort wie beim ersten Besuch.
Welche Probleme löst Inertia.js?
Inertia löst eine Vielzahl von Problemen für Webentwickler. Das Ziel bei der Entwicklung von Inertia war es, schnelle und effektive Lösungen für all die komplexen Probleme zu finden, die mit der Entwicklung einer SPA einhergehen.
SPA-Komplexität
Wenn Entwickler/innen eine SPA ohne Inertia entwickeln würden, müssten sie REST- oder GraphQL-APIs erstellen und diese mit einer Art Authentifizierungsmethode schützen, was unter anderem die Erstellung eines Frontend-Statusverwaltungssystems erfordern würde.
Inertia wurde entwickelt, um Entwicklern dabei zu helfen, ihre serverseitigen Anwendungen, die vollständig auf dem Backend-Server laufen, in eine einseitige JavaScript-Anwendung umzuwandeln, ohne dabei all die Komplexität zu durchlaufen, die mit der Entwicklung von SPAs verbunden ist.
Die Erstellung einer SPA mit Inertia ist ähnlich wie die Erstellung einer serverseitig gerenderten Anwendung. Du erstellst Controller, führst Datenbankabfragen für die benötigten Daten durch und gibst die Ergebnisse dann an die Views zurück.
Der Schlüssel dazu ist, dass die Views JavaScript-Komponenten sind. Das bedeutet, dass du die Daten von deinem Server abrufst und Inertia dann mit dem Frontend-Framework zusammenarbeitet, um die Seite mit den Daten als JavaScript-Datei anzuzeigen, sodass keine APIs erstellt werden müssen.
Authentifizierung
Da Inertia die Anwendung mit Daten und Antworten aus dem Backend füttert, verwendet es einfach das Authentifizierungssystem, das du auf der Serverseite hast. Das bedeutet, dass du dich nicht um die clientseitige Authentifizierung kümmern musst – du hast stattdessen ein sitzungsbasiertes Authentifizierungssystem, das mit deinem serverseitigen Authentifizierungssystem synchronisiert wird.
SEO-Bedenken
Wie bereits beim serverseitigen Rendering erläutert, fangen Suchmaschinen die Serverantwort an den Browser ab, um den HTML-Inhalt der Webseite zu indizieren. Im Falle einer SPA werden Suchmaschinen es schwer haben, den Inhalt der Seite zu identifizieren, da der Server entweder mit JavaScript-Komponenten oder JSON-Daten antwortet.
Inertia hat dieses Problem gelöst, indem es die Funktion des serverseitigen Renderings (SSR) eingeführt hat, die du zu deiner Anwendung hinzufügen kannst. Inertia nutzt die Node.js-Umgebung als Auslöser, um die JSON-Datenantwort in HTML umzuwandeln.
Um das besser zu veranschaulichen, stell dir vor, dass Inertia zwischen dem Server und dem Browser sitzt und beobachtet. Wenn der Server eine Inertia-Anfrage erhält und eine JSON-Antwort zurückschickt, erkennt Inertia die Existenz eines Node.js-Servers, wandelt die JSON-Antwort in HTML um und schickt sie zurück, so dass Suchmaschinen die Seite indizieren können, als ob die App keine SPA wäre.
Inertia bietet auch eine Head Komponente, mit der du einen Titel und Metadaten zu deiner Seite hinzufügen kannst:
<script setup>
import { Head } from '@inertiajs/inertia-vue3'
</script>
<template>
<Head>
<title>Page Title</title>
<meta name="description" content="Page Description" />
</Head>
</template>
Hier ist ein weiteres Beispiel aus der Online-Dokumentation von Inertia:
// Layout.vue
import { Head } from '@inertiajs/inertia-vue3'
<Head>
<title>My app</title>
<meta head-key="description" name="description" content="This is the default description" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
</Head>
// About.vue
import { Head } from '@inertiajs/inertia-vue3'
<Head>
<title>About - My app</title>
<meta head-key="description" name="description" content="This is a page specific description" />
</Head>
Formulare und Form Helper
Es ist möglich, mit Inertia eine Standardformularanfrage zu stellen. Dabei wird jedoch eine ganze Seite aktualisiert.
Inertia ermöglicht es den Nutzern, Formularanfragen mit Inertia zu stellen, wodurch die Seite nicht mehr aktualisiert werden muss. Sobald das Formular mit Inertia abgeschickt wurde, wird es serverseitig verarbeitet, so dass du den Nutzer wieder auf dieselbe Seite (oder eine ganz andere Seite) zurückleiten kannst.
Inertia macht uns das Leben bei der Erstellung und Übermittlung von Formularen leichter. Hier ist ein Beispiel dafür, wie du es mit der Vue.js 3 Composition API verwenden kannst:
<script setup>
import { useForm } from "@inertiajs/inertia-vue3";
const form = useForm({
email: null,
password: null,
});
</script>
<template>
<form @submit.prevent="form.post('kinsta/login')">
<input type="text" v-model="form.email" />
<input type="password" v-model="form.password" />
<button type="submit">Login</button>
</form>
</template>
Du kannst das Formular mit GET, POST, PUT, PATCH und DELETE abschicken.
<script setup>
import { useForm } from "@inertiajs/inertia-vue3";
const form = useForm({
email: null,
password: null,
});
const submit = () => {
form.post("kinsta/login");
};
</script>
<template>
<form @submit.prevent="submit()">
<input type="text" v-model="form.email" />
<input type="password" v-model="form.password" />
<button type="submit">Login</button>
</form>
</template>
Die Formularhilfe von Inertia bietet auch einige hilfreiche Eigenschaften, wie z. B. die Eigenschaft processing, die sich in true verwandelt, sobald das Formular verarbeitet wird. Damit kannst du die Schaltflächen zum Absenden deaktivieren, während das Formular verarbeitet wird, um Mehrfachübermittlungen zu verhindern:
<button type="submit" :disabled="form.processing">Submit</button>
Du kannst auch preserveState, preserveScroll und Event-Callbacks mit dem Formular verwenden, die hilfreich sind, wenn du dem Formular zusätzliche Optionen hinzufügst:
form.post('kinsta/login, {
preserveScroll: true,
onSuccess: () => form.reset('password'),
})
Den Status mit Inertia.js speichern
Angenommen, ein Nutzer füllt ein Formular auf deiner Website aus und beschließt, zu einer anderen Seite zu navigieren, bevor er es absendet. Wenn er auf die Formularseite zurückkehrt, werden die Eingaben des Nutzers zurückgesetzt.
Zum Glück gibt es in Inertia die Funktion useRemember, mit der du die Formulareingaben des Nutzers im Verlaufsstatus speichern und bei der Navigation im Verlauf wiederherstellen kannst.
Du kannst diese Funktion nutzen, indem du sie aus Inertia importierst und auf dein Formular anwendest:
import { useRemember } from '@inertiajs/inertia-vue3'
export default {
setup() {
const form = useRemember({
first_name: null,
last_name: null,
})
return { form }
},
}
Wenn du eine Seite mit vielen Formularen hast, die die Funktion useRemember nutzen, muss jede Komponente einen eindeutigen Schlüssel haben, damit Inertia weiß, welche Daten in jeder Komponente wiederhergestellt werden müssen:
const form = useRemember({
first_name: null,
last_name: null,
}, 'Users/Create')
Wir brauchen die Funktion useRemember nicht zu verwenden, wenn wir die Formularhilfe von Inertia nutzen. Inertia merkt sich den Status der Formulareingabe automatisch, so dass wir nur einen eindeutigen Bezeichner angeben müssen:
import { useForm } from '@inertiajs/inertia-vue3'
const form = useForm('CreateUser', data)
Das Schöne an dieser Funktion ist, dass du dir alle Daten in deiner Anwendung manuell merken kannst. Dies kann auch nützlich sein, um Daten von einer tief verschachtelten Komponente an die Hauptkomponente weiterzugeben:
import { Inertia } from '@inertiajs/inertia'
// DeeplyNestedComponent.vue
Inertia.remember(data, 'my-key')
// MainComponent.vue
let data = Inertia.restore('my-key')
Dateiuploads
Inertia erkennt, ob das Formular Dateien enthält und wandelt in diesem Fall die Anfragedaten in das formData Objekt um, das immer benötigt wird. Wenn du also ein Formular hast, das einen Namen und einen Avatar enthält, wird Inertia das Formular als multipart/form-data behandeln.
Validierung und Fehler
Wenn ein Benutzer ein Formular mit falschen Werten absendet und es zur Validierung an den Server geschickt wird, kehrt der Benutzer mit einem Blitz von Validierungsfehlern in der Sitzung zur Formularseite zurück. Inertia fängt Fehler aus der Sitzung ab und speichert sie als Seitenrequisiten.
Da Requisiten reaktiv sind, erscheinen sie, wenn die Formularübermittlung abgeschlossen ist. Damit Inertia das Vorhandensein von Fehlern erkennen kann, behält es page.props.errors im Auge.
Sobald es Fehler gefunden hat, liefert es einen onError() Callback anstelle von onSuccess().
Hier ist ein Beispiel mit Vue 3, das dir hilft, das Konzept zu verstehen:
const submit = () => {
form.post("kinsta/login", {
onError: () => {
return "Hi! , the server returned an error and Inertia saved it as a prop. Do as you like with me"
},
onSuccess: () => {
return "Wohoo!!"
}
}
);
};
Die Anzeige von Fehlern ist so einfach, wie sie als Requisiten zu definieren und bedingt in deinem HTML anzuzeigen:
<script setup>
defineProps({
errors: Object,
});
//
</script>
<template>
<form @submit.prevent="submit()">
//
<div v-if="errors.email">{{ errors.email }}</div>
</form>
</template>
Wenn du Inertia verwendest, brauchst du dir keine Gedanken über alte Eingabedaten im Falle von Fehlern zu machen. Sobald Inertia erkennt, dass der Nutzer auf die Seite mit den Fehlern weitergeleitet wurde, behält es automatisch den alten Zustand der Komponente für POST, PUT, PATCH und DELETE bei.
Partielle Reloads mit Inertia.js
Die partielle Reload-Funktion von Inertia ist einfach hervorragend, da sie nur eine ausgewählte Komponente auf der Seite neu lädt, anstatt den gesamten Datensatz erneut vom Server zu holen. Das hebt die Optimierung deiner Anwendung auf die nächste Stufe. Du kannst auch den folgenden Link besuchen, um mehr darüber zu erfahren, wie du die Leistung deiner Laravel-Anwendung optimierst.
Teilweise Neuladungen können mit der Eigenschaft only von Inertia durchgeführt werden:
import { Inertia } from '@inertiajs/inertia'
Inertia.visit(url, {
only: ['users'],
})
Externe Weiterleitungen mit Inertia.js
Das Subdomain-Routing oder die externe Weiterleitung ist eine der frustrierendsten Herausforderungen bei SPAs. Es ist unvernünftig zu erwarten, dass deine Anwendung eine Single-Page-Anwendung bleibt, während sie gleichzeitig eine andere Domain besucht.
Es kann notwendig sein, eine Inertia-Anfrage auf eine externe Website oder sogar auf einen anderen Endpunkt in deiner Anwendung umzuleiten, der nicht zu Inertia gehört. Dies ist durch einen serverseitig initiierten window.location Besuch möglich:
return Inertia::location($url);
Wenn du beim Testen die Konsole öffnest, wirst du feststellen, dass sie 409 conflict zurückgibt. Diese Antwort enthält die URL im X-Inertia-Location Header, die Inertia auf der Client-Seite erkennt und den Besuch automatisch durchführt.
Wie man mit Inertia.js arbeitet
Die Arbeit mit Inertia ist ähnlich wie die Arbeit an einer serverseitigen Anwendung, mit dem Unterschied, dass es sich um eine vollständig reaktive Single-Page-Anwendung handelt. Du solltest in der Lage sein, deine Routes zu definieren, Controller anzupassen und eine View zurückzugeben, die Inertia an dein Frontend-Framework sendet.
Laravel-Routen und Inertia.js
Laravel-Routing ist etwas, auf das du bei der Entwicklung deiner Anwendung nicht verzichten solltest. Es ermöglicht dir, schnell die komplexesten Routen zu erstellen, und es gibt viele kostenlose und kostenpflichtige Laravel-Ressourcen, mit denen du mehr über Laravel und die Funktionsweise von Routing lernen kannst.
Das Schöne daran ist, dass du keinen Vue Router oder React Router brauchst, um einfaches Client-seitiges Routing durchzuführen, denn Inertia hat sein eigenes Routing-System, das mit Laravel-Routing funktioniert. Wenn der Job keine Backend-Daten benötigt, kannst du den Router-Helper verwenden, um direkt zu einer Komponente zu routen.
Route::inertia('/home', 'HomeComponent');
public function index()
{
return Inertia::render('Users/Index', [
'users' => User::all();
'create_url' => URL::route('users.create'),
]);
}
Bevor wir weitermachen, möchten wir dir DevKinsta vorstellen, ein leistungsstarkes Tool für Entwickler, Designer und Agenturen, mit dem sie ein- und mehrseitige WordPress-Webanwendungen erstellen können. Glücklicherweise kann WordPress mit dem Corcel-Paket in Laravel integriert werden. Wenn du eine Laravel-App mit WordPress-Integration entwickelst, solltest du dir das Kinsta APM-Tool für eine hervorragende Leistungsüberwachung ansehen.
Umleitungen
Du solltest den Nutzer immer auf den richtigen Pfad umleiten, der der ursprünglichen Anfrage entspricht. Wenn ein Nutzer z. B. den Endpunkt store ansteuert, um einen Beitrag einzureichen, solltest du den Kunden zum Endpunkt GET umleiten, vielleicht zur Beitragsroute.
public function store()
{
Post::create(
Request::validate([
'title' => ['required'],
'body' => ['required'],
])
);
// redirect the user to the posts show page
return Redirect::route('posts.show');
}
Nachteile der Verwendung von Inertia.js
Bisher haben wir uns auf die verschiedenen Vorteile von Inertia konzentriert. Doch wie jedes andere Tool hat auch Inertia Nachteile.
- Der Nutzer muss über Grundkenntnisse in Vue oder React verfügen.
- Da die Modelldaten vollständig an die Client-Seite übergeben werden können, muss der Benutzer sicherstellen, dass die relevanten Daten explizit an das Frontend zurückgegeben werden.
- APIs müssen neu erstellt werden, wenn die Webanwendung irgendwann einmal eine Android- oder iOS-Anwendung haben soll.
Solltest du Inertia.js verwenden?
Um die Frage zu beantworten, ob du Inertia verwenden solltest oder nicht, lautet die Antwort: Ja, wenn du eine einseitige, serverseitige, SEO-gesteuerte moderne App erstellen willst.
Du kannst mehr erfahren, indem du die offizielle Inertia.js-Website besuchst und die Dokumentation liest.
Zusammenfassung
Client-seitige Anwendungen und SPAs werden immer beliebter, da sich die Webtechnologien weiterentwickeln, während traditionelle serverseitige Anwendungen auf der Strecke bleiben. Mehr als je zuvor ist es wichtig, die richtigen Werkzeuge zur Hand zu haben.
Inertia ist ein fantastischer moderner Ansatz oder eine Lösung für serverseitige Entwickler, um Single-Page-Anwendungen zu erstellen. Es löst so viele Probleme und spart so viel Zeit.
Wie wir in unserem Artikel besprochen haben, unterstützt Inertia jetzt das serverseitige Rendering, was es auf eine ganz neue Ebene bringt, indem es Entwicklern ermöglicht, SEO-gesteuerte SPAs zu erstellen.
Inertia erhält auch viel Zuspruch von der Community. Die Entwicklungsarbeit wird von Laravel Forge, Laracasts und einer Reihe anderer Organisationen unterstützt. Damit ist Inertia ein zuverlässiges Tool, das auch in Zukunft für Laravel-Entwickler/innen verbessert und gepflegt wird, zumal die Nachfrage nach Laravel-Programmierer/innen weiter steigt.
Wenn du auf der Suche nach einem neuen Zuhause für dein Intertia-Projekt bist, solltest du dir die Application Hosting-Angebote von Kinsta ansehen.
