Best practice loading/passing data to front end - Laravel

I'm learning how to make web applications with the Laravel framework. I'm also new with JS and PHP.

Background info:

For my web application i use Laravel as backend, blade for the templates and Vue for the front end interactions.

Now there are (as far as i know) 2 ways to get the data in the front end.

1. Pass the data with the view e.g. like this <game-overview-component :data=""></game-overview-component>
2. Make a seperated request (with JS/Axios) after the view is loaded

When i'm correct, the advantage of method 1 that just 1 request is made to the backend instead of 2, so it reduces requests to the server (so overhead). I know that the advantage of method 2 is that the template is already shown before the data is loaded. This can improve the UX as the layout is already shown, even if it takes long to load the data.

Questions:

• Is my reasoning about method 1 true? is it realy reducing overhead and requests? or are still 2 requests made in the BG?

• Are there other methods exept of the mentoined 2?

• What is the best practice way to get the data in the front end? Or is this depending on the application?

Thanks for the explaination in advance

via Chebli Mohamed