Keep state while lazy loading tabs data

Hello,

I am struggling doing something simple using Inertia. I have a page presenting an online Course with a sticky sidebar showing Course details and tabs with specific course data like : main content, chapters, faq, reviews...

The data are simply rendered using Inertia::render('courses/CourseDetail', ...) and it works.

Now I would like to optimize the speed and UX, so naturally lazy load each tab on click.

First I tried to load json data, but I loose the inertia behaviour for rendering the component and I have to manage all by myself that is not very smart.
Then I used router.get(url, {}, { preserveScroll: true, preserveState: true}); which calls the same method in the controller and use again Inertia::render.

On one hand, returning only the tab data (ex for the reviews), my stickybar with the course data makes an error because course data is missing. On the other hand, returning the Course data for each tab request is not very optimized as it will request my Eloquent model (that is already displayed) for each tab.

I tried many solutions (also using pinia) but I'm not able to make something clean and optimized. The hard part is also that I have this sticky bar that must be visible whatever the tab is visited.

Also I would like to remember the tab data somewhere in order to not request the backend if tab was previously loaded. Also the reviews tab must be able to handle the pagination.

It looks very easy but I struggle using Inertia and vue to make it work. Can someone help me to make something clean please ? Thank you

Stack : Laravel 12, Vue, Inertia.

vincent15000

9 months ago

Level 63

I think that partial reloads is your solution.

https://inertiajs.com/partial-reloads

This way you can load only the needed data when the page loads for the first time.

And when you click on a tab, you can loazy load other data specific to the clicked tab.

https://inertiajs.com/partial-reloads#lazy-data-evaluation

kanak09

9 months ago

Level 1

@vincent15000 Thanks for your suggestion. I implemented this , so yes in a way I think you are right because using "only" will not render and useless data to the front, but on backend side the data is still processed.

To fix that I tried to use ONLY on my front request, and OPTIONAL on backend, but It's not very clean to put all my optional code in a OPTIONAL CLOSURE. In there do a simple request like 'users' => Inertia::optional(fn () => User::all()),

but what if i have lot of calcul and things to process that takes 10 lines of code, should I write all my logic there ?

Even without having 10 lines of code, let's say I have this :

$course->load('xxx'); $aaa = $course->xxx->yyy; $bbb = $ccc;

return Inertia::render('courses/CourseDetail', [ 'option1' => fn() => Inertia::optional(new CourseDetailResource($course)), 'option2' => fn() => $aaa , 'option3' => fn() => $zzz, ]);

option 1 and option2 both need the load relationship so I either i duplicate code in each closure, or I do it in common but it will load useless relation when I only ask for option3 that doesn't need relation.

1 like

Please or to participate in this conversation.