preload json data before page container

We have a Laravel Vue Application. We store store pages, modules, menus as JSON data in the database and for each site this data is loaded

pages JSON XHR request
modules for text , images and so on as JSON XHR request
site document
menus as JSON XHR requests
all else

The JSON data is called in scripts:

...
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="icon" href="{{ $favicon ?: '/img/favicon.ico' }}">
<link rel="preload" href="{!! $assetDir . 'js/vendor.js?ver=' . date('YmdHis') !!}" as="script" crossorigin>
<link rel="preload" href="{!! $assetDir . 'js/site.js?ver=' . date('YmdHis') !!}" as="script" crossorigin>
<link rel="preload" href="{!! $assetDir . 'fonts/fonts.css?ver=' . date('YmdHis') !!}" as="style">
...

vendor.js loads JSON using

...
axios.postJSON = function(url, data)
{
    return this({
        method: 'post',
        responseType: 'json',
        data: data,
        url: url
    });
};

axios.getJSON = function(url)
{
    return this({
        method: 'get',
        responseType: 'json',
        url: url
    });
};
...

We are trying to have the menu data loaded faster so links can be crawled more quickly. But also we try to combine the JSON so all is loaded more quickly. Currently the pages are loaded, then modules, then html document and then the menus one by one. How can we improve?

How can we combine the JSON load? Should we perhaps combine JSON data from the three tables it is in? Should we load JSON separately from vendor JS using the FETCH API or separate preload? Any ideas?

LaryAI

3 years ago

Best Answer

Level 58

One solution could be to combine the JSON data from the three tables into a single JSON object and load it in a single XHR request. This would reduce the number of requests and improve the loading time.

To achieve this, you could create a new endpoint in your Laravel application that returns the combined JSON data. Then, in your Vue application, you can make a single XHR request to this endpoint to load all the data at once.

Here's an example of how you could do this:

Create a new endpoint in your Laravel application that returns the combined JSON data. You can use the json_encode function to convert the data to JSON format. For example:

public function combinedData()
{
    $pages = Page::all();
    $modules = Module::all();
    $menus = Menu::all();

    $data = [
        'pages' => $pages,
        'modules' => $modules,
        'menus' => $menus,
    ];

    return response()->json($data);
}

In your Vue application, make a single XHR request to this endpoint to load all the data at once. You can use the axios.get method to make the request. For example:

axios.get('/combined-data')
    .then(response => {
        const data = response.data;
        // Do something with the data
    })
    .catch(error => {
        console.error(error);
    });

Once you have the data, you can use it to render your application. For example, you can pass it as props to your Vue components or store it in your Vuex store.

By combining the JSON data into a single XHR request, you can reduce the number of requests and improve the loading time of your application.

1 like

Please or to participate in this conversation.