How to design front on vue.js and REST-api?

Question

Software design

The question is not how to send asynchronous requests. The question is about the architecture of the application.
The front part is built on vue.js (nuxt.js), there are only views, there is no data.
The back part in this case is in PHP, but it's not that important. REST is REST.
What is the problem:
1) The client requests the address /orders?page=1, html+js flies to it
2) When the JS is loaded, the vue component requests data through the api, for example /api/orders?page=1
Both the REST API and vue are spinning on the same server, they lie in neighboring folders, but the client has to send 2 requests to the remote server, it looks like a crutch. On the one hand, the scheme will help to place the application on different servers in the future, support mobile platforms (the API does not have to be rewritten), but now it is only a minus that the request goes through DNS (IP search by domain name and sending the request to the same server).
The question is, is it possible to implement the following scheme:
1) The client requests /orders?page=1
2) vue (here you can also fasten node.js, if necessary) accesses /api/orders?page=1 but not through DNS, but directly on localhost.
3) Server side rendering is immediately screwed on
4) As a result, the client receives an already rendered page, but with full-fledged SPA functionality. Due to SSR and a single HTTP request, the speed of loading and rendering the page increases by several times (whether)
ps in the current version of php and renders and prepares data. It calls itself perfectly within one HTTP request and works very quickly, but I got tired of writing separate js / Jquery logic, and given that it all needs to be built by components, it’s even harder

Answer 1

nuxtServerInit
routerMiddleware
It seems that there are even examples on the site ...
But keeping nuxt for the sake of rendering view is inadequate IMHO.
It is better to give the page with json data inside the script to the user, and the user will already load both vue and everything else.
For example: you put a template through vuecli webpack, make a website, make build. Further dist you throw in the project with php. Inside index.html, render the script section and pass the data received from the database into the variable. Although this is a less delicate way, it is much more pleasant in terms of saving resources by getting rid of nuxt rendering and unnecessary requests from the same nuxt to the database.

Answer 2

/orders?page=1

This is no longer REST
Should return JSON

Answer 3

if the problem is in two separate requests for the front and for the data, then you need to look here
https://ru.vuejs.org/v2/guide/ssr.html
But IMHO touch SSR until your site can recoup the cost of its implementation, no meaning.
The whole point of SPA is that the first request should be given to you by a fast server that serves only statics, it has no page rendering costs, nginx often does this, but API requests are already served by a slow server that raises Java, PHP, Python well, or whatever, in order to form data for you.
And yes, SSR is usually no longer PHP but node.js so as not to duplicate business logic