Inertia Js Vue Laravel Accordion

[dubljanin96]

Hi all, I have a website that I made in Laravel but it has a problem. DOM is too big. It's loading okay since I did a lot of optimisation but I want to make it from 3600ms to 400ms. I tested my loading speeds using Lighthouse. On the first page, I have like 10 accordions that load a lot of data. My DOM is around 1700. I was wondering is it possible to make accordions so that I every time send a request to the database for each one. Is it something hard to do? I have zero experience in Vue but I plan on learning it. Is there any material that I can look for my specific problem? Any advice is more than welcome.

Thanks a lot for your help, Milan Dubljanin

[claudiodekker]

Hi @BlueSilver001,

While Inertia doesn't really support this by itself, you can totally achieve this using Ajax/XHR calls (e.g. using Axios or fetch), which is perfectly suited for situations like this.

Basically what you'll want to do on the back-end, is to create an (api) endpoint that contains information in the URL (like an id) to 'know' what accordion it's loading. Then, you load the data for that specific accordion, and return it as JSON. Next, on the front-end, you'll want to add an on-click event listener on the element that handles the unfolding/folding of the accordion, so that when you click it it can make the Ajax/XHR call to the API endpoint you made. Next, using async/await or promises, you can then make javascript 'wait' until it gets a response from your back-end, at which point you can use the data to fill your accordion.

That takes care of your slow load times, but it'd still make your DOM big. To (somewhat) solve this, you could make Vue 'remove' the elements when the accordion is folded, and to re-create them using in-memory data using v-if statements.

Of course, there's a lot more to this, and these are only some pointers (you'd still need to prevent loading the data if it's already been loaded, or adding a 'loading indicator' while your front-end is waiting for the data (e.g. on slow connections) and possibly more) but this should more than point you into the right direction.