SPA концепция node+vue/react?

Question

[arklight]

Привет! Не понятно то, как должен работать сервер вместе с клиентской частью. Вернее в общем случае понятно, а вот с конкретикой беда. Есть условный сайт "qwe.ru", пользователь на него заходит и в этот момент что должен сделать сервак? Отправить, по сути, ту саму сбилженную htmlку, которая подтянет за собой js и прочее. Но вот, например, на сайте есть клиентский роутинг (browser route в реакте например). Если пользователь перейдёт по ссылке, то не будет перезагрузки страницы? Или как это вообще должно происходить?

Comments

[Михаил]

Если без SSR то клиент заходит на сайт, ему даются index.html, bundle.js и main.css
Общение с бэкендом через RESTapi

Answer 1

[Орхан Гасанлы]

Как правило, в данном случае это 2 разных приложения.
Клиентская часть - vue, react, angular, swelte и др.
Серверная часть - laravel, django, yii2, RoR, Spring и др.
Общение между сервером и клиентом происходит при помощи запросов к API через например, axios или любые другие библиотеки для выполнения http запросов.

Если пользователь перейдёт по ссылке, то не будет перезагрузки страницы?

То что нет перезагрузки страницы, не говорит о том, что не был выполнен запрос. Например, выполняется GET запрос и первый компонент заменяется вторым. Если при подключении компонента нужно выполнить запрос к серверу (к API) и например, получить список объектов, то запрос в свою очеред тоже делается

Answer 2

[Daniil Vasilyev]

У меня, например, backend и frontend - два проекта.
Frontend как обычно под nginx заливаю.

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

Потом backend запускаю, а в nginx делаю проксирование всех запросов /api на localhost с портом, где прослушивает backend.

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;
}