Home Arrow Icon Knowledge base Arrow Icon Global Arrow Icon Wie geht Inertia anders mit clientseitigem Routing um als herkömmliche Vue.js?


Wie geht Inertia anders mit clientseitigem Routing um als herkömmliche Vue.js?


Inertia handhabt das clientseitige Routing in mehreren wichtigen Punkten anders als herkömmliches Vue.js:

1. Serverseitiges Rendering:
- Inertia verwendet serverseitiges Rendering zum Rendern von Vue-Komponenten, was bedeutet, dass das anfängliche Laden der Seite vom Server übernommen wird. Dieser Ansatz verbessert SEO und anfängliche Ladegeschwindigkeiten im Vergleich zum herkömmlichen clientseitigen Rendering von Vue.js[2][4].

2. Minimaler JSON-Prop:
– Wenn der Server eine Anfrage für eine neue Route erhält, sendet er eine minimale JSON-Antwort zurück, die den Namen der Vue-Komponente und alle erforderlichen Requisiten enthält. Dieser Ansatz reduziert die übertragene Datenmenge und verbessert die Leistung[2][4].

3. Trägheitsverbindungskomponente:
– Inertia bietet eine benutzerdefinierte „Link“-Komponente, die Klicks abfängt und XHR-Anfragen auslöst, um die Daten vom Server abzurufen. Diese Komponente stellt sicher, dass der Seiteninhalt dynamisch aktualisiert wird, ohne dass die gesamte Seite neu geladen werden muss[4].

4. Kein Vue-Router erforderlich:
- Durch Trägheit ist kein Vue-Router mehr erforderlich, da alle Routen serverseitig definiert und vom Router von Laravel verwaltet werden. Dies vereinfacht den Entwicklungsprozess und reduziert die Komplexität der Verwaltung mehrerer Routing-Systeme[2][4].

5. Einheitliches Frontend und Backend:
- Inertia lässt sich nahtlos in Laravel integrieren, sodass Entwickler dieselbe Vorlagensprache (Vue.js) sowohl für das Frontend als auch für das Backend verwenden können. Dieser einheitliche Ansatz vereinfacht die Entwicklung und reduziert den Bedarf an zusätzlicher Konfiguration[1][3].

Durch die Nutzung dieser Unterschiede bietet Inertia einen einzigartigen Ansatz für das clientseitige Routing, der die Stärken von Vue.js und Laravel kombiniert, was zu einem effizienteren und skalierbareren Entwicklungsprozess führt.

Zitate:
[1] https://github.com/inertiajs/inertia/issues/905
[2] https://inertiajs.com/routing
[3] https://jetstream.laravel.com/stacks/inertia.html
[4] https://vueschool.io/articles/vuejs-tutorials/the-ultimate-guide-for-using-vue-js-with-laravel/
[5] https://laracasts.com/discuss/channels/vue/inertia-vs-vue-pinia-and-router