1

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

Improve this question

1 Answer 1

Reset to default
0
  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.
Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

I now already decided against Inertia. Ofc, optimizing your db / API etc. does propably solve this problem for most people. I did notice the diffrence in behavior even when no users had to be fetched. For me it was a factor which ultimately fed into the decision making process. Because I feel like it takes a little bit of Vues dynamics. When working with a tool, those small waiting times before displaying any DOM change are annoying to me when Im trying to get faster at repetitive tasks.
Thanks for the update - it all depends on what technology you prefer to work with. I am more comfortable with Laravel, so am happy with Inertia. If you are used to traditional SPAs, then maybe you indeed don't need Inertia. That being said, if I answered your question, and you do not need other people to write answers to it, please mark click the "tick" next to my answer to accept it, and mark the issue as solved.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.