How to migrate a project to nuxt?

Question

Vue.js

There is a working project on vue.js. After auditing the SEOs, you need to organize ssr.
I studied the issue for half a day, everywhere it is written in pieces. I would like to make sure that I understand the picture correctly:
- The essence of SSR is that my first request to the server will return me not an empty html file as it is now (application on vue-cli), but immediately filled. Otherwise, there is no difference.
- This same rendering is done using nodejs, that is, instead of simply uploading the file to nginx, you have to configure request processing through node.
Further, I am confused by the differences between a regular vue application and a nuxt application, namely the changed directory structure and routing. It turns out that I need to transfer the entire project and change a little. Why isn't it possible to just add server rendering to my already existing project? In addition, the picture with Ajax is not completely clear. For example, when I load a page, I have an ajax request that fills the page with data. Firstly, it is not clear how the node will determine these requests, I have them, for example, through $.ajax(), and secondly, there are requests that take quite a long time (a couple of seconds) - these are statistics that are counted. Now a beautiful preloader is spinning at the place of its appearance, but how will it be after the transfer to nuxt? The page will be rendered these couple of seconds?
Help, please, to understand.

Answer 1

everywhere written in pieces

https://ssr.vuejs.org/
In general, the world didn’t converge on nuxt, Google, upon request vue cli ssr, issues several packages, including quite active ones.
In order not to rewrite all the routing to Nyukst's (and this is really not very fun), try router-module . src rename to components, the rest remains as is.
reverse-proxy to a nodejs application is very simple, and there are plenty of manuals:

upstream myAppName {
    server 127.0.0.1:3003;
}

server {
    listen 80;

    location / {
        proxy_pass http://myAppName;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For  $proxy_add_x_forwarded_for;
        proxy_set_header User-Agent $http_user_agent;
        proxy_cache_bypass $http_upgrade;
    }
}

If it's jQuery, then you'll have to replace it with axios. Some requests will have to be moved from mounted to asyncData .
Only query these statistics on the client side:

mounted() {
    if (process.browser) {
        this.fetchStats();
    }
}

In general, such slow things should be cached on the backend anyway, for example, put pre-calculated statistics in redis there or mongodb.