Home Arrow Icon Knowledge base Arrow Icon Global Arrow Icon Hoe gaat Inertia anders om met routering aan de clientzijde dan met traditioneel Vue.js


Hoe gaat Inertia anders om met routering aan de clientzijde dan met traditioneel Vue.js


Inertia verwerkt routering aan de clientzijde op verschillende belangrijke manieren anders dan traditionele Vue.js:

1. Rendering aan de serverzijde:
- Inertia maakt gebruik van server-side rendering om Vue-componenten weer te geven, wat betekent dat het aanvankelijk laden van de pagina door de server wordt afgehandeld. Deze aanpak verbetert SEO en initiële laadsnelheden in vergelijking met traditionele Vue.js client-side rendering[2][4].

2. Minimale JSON-prop:
- Wanneer de server een verzoek voor een nieuwe route ontvangt, stuurt deze een minimaal JSON-antwoord terug met de naam van de Vue-component en eventuele benodigde rekwisieten. Deze aanpak vermindert de hoeveelheid overgedragen gegevens en verbetert de prestaties[2][4].

3. Traagheidsverbindingscomponent:
- Inertia biedt een aangepaste 'Link'-component die klikken onderschept en XHR-verzoeken activeert om de gegevens van de server op te halen. Deze component zorgt ervoor dat de pagina-inhoud dynamisch wordt bijgewerkt zonder dat de pagina volledig opnieuw wordt geladen[4].

4. Geen Vue-router nodig:
- Inertie elimineert de noodzaak van Vue Router, omdat alle routes server-side worden gedefinieerd en worden afgehandeld door de router van Laravel. Dit vereenvoudigt het ontwikkelingsproces en vermindert de complexiteit van het beheer van meerdere routeringssystemen[2][4].

5. Geünificeerde frontend en backend:
- Inertia integreert naadloos met Laravel, waardoor ontwikkelaars dezelfde sjabloontaal (Vue.js) kunnen gebruiken voor zowel de frontend als de backend. Deze uniforme aanpak vereenvoudigt de ontwikkeling en vermindert de behoefte aan aanvullende configuratie[1][3].

Door gebruik te maken van deze verschillen biedt Inertia een unieke benadering van client-side routing die de sterke punten van zowel Vue.js als Laravel combineert, wat resulteert in een efficiënter en schaalbaarder ontwikkelingsproces.

Citaties:
[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