SPA concept node+vue/react?

Question

Node.js

Hey! It is not clear how the server should work together with the client part. Rather, in the general case it is clear, but the trouble is with the specifics. There is a conditional site "qwe.ru", the user comes to it and at this moment what should the server do? Send, in fact, the very smashed html, which will pull up js and so on. But here, for example, the site has client-side routing (browser route in React, for example). If the user clicks on the link, will the page not reload? Or how is it supposed to happen?

Answer 1

As a rule, in this case, these are 2 different applications.
Client side - vue, react, angular, swelte, etc.
Server side - laravel, django, yii2, RoR, Spring, etc.
Communication between the server and the client takes place using API requests through, for example, axios or any other libraries to perform http requests.

If the user clicks on the link, will the page not reload?

The fact that there is no page reload does not mean that the request was not completed. For example, a GET request is made and the first component is replaced by the second. If, when connecting a component, you need to make a request to the server (to the API) and, for example, get a list of objects, then the request is also made in turn

Answer 2

For example, I have backend and frontend - two projects.
I upload Frontend as usual under nginx.

location / {
    try_files $uri $uri/ /index.html;
    root /var/www/frontend/dist;
    index index.html;
}

Then I start the backend, and in nginx I proxy all requests / api to localhost with the port where the backend is listening.

location /api {
    proxy_set_header  X-Real-IP  $remote_addr;
    proxy_set_header  X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header  Host  $host;
    proxy_pass http://localhost:3000;
}