laravelvue.jsinertiajs

Page redering diffrence Inertia vs. Vue with Laravel Backend


I implemented a simple crud application in two ways. One with Laravel and Vue and one with Laravel, Vue and Inertia.

When rendering a simple user list in my Vue/Laravel application (either with routing or initial page load), Vue renders the whole page instantly and loads the user list as soon as it receives it from the server. -> good user experience, possibility to implement a loading indication

When rendering the same thing in my inertia application, Vue renders the whole page after the data has been received from the server. Which is a very bad thing for applications with large amounts of data.

Even in my really small/slim application, I felt the difference and figured this out with a simple sleep(3) before returning the view (or Inertia::render) in my UserController.

Is this normal/is there a way to prevent this? Or did I possibly implement inertia poorly?

I'm using inertia.js 0.8.5, inertia-vue 0.5.5 and Vue 2.6.12


Solution

    1. Normally, if you want to display lists of users with Inertia, you'd paginate the list server-side with Laravel's built-in pagination. If the page load time is slow, you're probably trying to load too much data/missing eager loads/missing DB indexing/doing some calculation that can be optimized.
    2. You can use Progress Indicator to improve the UX when navigating between Inertia views. Does it make a difference to the user if they see an empty table in an SPA with ajax calls before the data loads vs. seeing a progress bar before the view reloads? IMO not really.
    3. If for some reason in a particular view it's really important to have the table layout (or some other empty data container) displayed, even if it's empty for some time, you can always load the data with ajax in that one-off case. Not all data in an Inertia app needs to be "pushed" to the view from the controller, you can also "pull" it from Vue/React side.