Level 29
Are you using all the json data on each page? How big is the json and what is the actual loading time?
May 20, 2024
2
Level 1
Laravel parsing JSON to Vue component makes website really slow
Parsing a big JSON to a Vue component makes our website really slow.
So the case is, we are delivering our menu items through AppServiceProvider to a header Vue component in each page (the query is cached but this is not the issue/point), i noticed, parsing the data to the component as a JSON it makes our website really slow, this happens because the JSON is big (removing the parsing JSON make the website fast again), we want the data to be accessible as fast as possible, we do not want it to be an API call because there might be a delay in getting a response from the server.
Is there any workaround to pass JSON data to a Vue component but not make the website slow, has anyone faced this issue? any ideas?
Laravel Version: 5.8
Level 1
@gych It's big enough to create a huge DOM, rendering the DOM takes time because of the huge JSON data we are parsing, that's the issue.
So the solutions I'm thinking are:
- Either do an API call which is not recommended, server might take time to respond - this is the alternative we are using right now which is not very user friendly because hovering on the menu items are empty until the server has a response (about 8 seconds)
- Change the architecture and apply server side rendering but it will take a lot of time
I don't know any other methods parsing big JSON data to a Vue Component which results to a huge DOM which takes time to render.
Please or to participate in this conversation.