Использую ли я один или два сервера, если я хочу обслуживать файлы React и выполнять вызовы API?

Question

Я хочу протестировать React SSR, в которой я совершенно новичок и у меня нет опыта (Пожалуйста, не стесняйтесь исправлять меня, где бы я ни был неправ, поскольку все, что я делаю, основано на догадках!).Я могу ошибаться, но моя идея о том, что означает SSR, заключается в том, что сервер будет обслуживать файлы React.

В настоящее время я использую сервер Node / Express, поэтому я предполагаю, что он будет выглядеть примерно как app.use('/home', express.static('build')), где «build» - это моя папка React.Однако что мне делать, если моему приложению React необходимо выполнить API-вызовы на моем сервере?Тогда мне потребуется отдельный сервер Node / Express, который обрабатывает вызовы API, или я буду использовать тот же сервер, который обслуживает мои файлы React?Если я воспользуюсь тем же, каким будет мой URL для получения (например, если мой сервер будет на www.example.com, это будет просто www.example.com или это будет что-то вроде «127.0.0.1»)?Возможно ли то, что я хочу сделать?Это полезно?

Answer 1

Допустим, у нас есть это экспресс-приложение, которое будет обслуживать файл сборки React / s ..

const express = require('express');

const app = express();
const port = process.env.PORT || 4000;

const controllers = require('./controllers');

// Read routers from express controllers.
app.use('/api/v1', controllers);
// for example: localhost:3000/api/v1/get-articles

// For React deployment.
if (process.env.NODE_ENV === 'production') {
  // # npm run build #
  // Serve build version of the app.
  app.use(express.static(path.join(__dirname, 'client/build')));
  // Return all the requests that don't fit to the list of controllers routes above to our React app.
  app.get('*', function(req, res) {
    res.sendFile(path.join(__dirname, 'client/build', 'index.html'));
    // this index.html is where our React production bundle lives.
  });
}

app.listen(port, () => console.log(`Listening on port ${port}`));

module.exports = app;

Итак, вы можете сделать все это на одном сервере.Я надеюсь, что это помогает, спросите меня, если хотите.

Answer 2

Всего одного сервера будет достаточно для ваших нужд.

Сервер

Вам потребуется обслуживать статические файлы с одной из ваших конечных точек, предпочтительно корневой конечной точки (/).

Ваш интерфейс может вызывать ваши конечные точки API без использования доменного имени.По умолчанию вызовы API без доменного имени будут отправляться на тот же источник.

Допустим, ваш сервер находится на example.com.

• Когда вы загружаете корневой домен (http://example.com/) в браузере будет загружено ваше приложение реакции.

• При выполнении вызовов API в приложении реакции укажите URL-адрес без домена.

Ваш код извлечения будет выглядеть следующим образом

fetch('/endpoint')
  .then((response) => response.json())
  .then(() => {
    // do happy things
  });

Если вы не укажете имя домена в URL-адресе извлечения, ваш браузер по умолчанию вызовет API для вашего корневого домена => http://example.com/endpoint.

В localhost ваш вызов API по умолчанию перейдет на http://localhost/endpoint.

Так что вам никогда не придется беспокоиться о том, в какой домен выполняются вызовы API.

SSR

Вы почти правы с точки зрения SSR

Моя идея о том, что означает SSR, заключается в том, что сервер будет обслуживать файлы React

Но в действительности это означает, что приложения React являются приложениями JavaScript.Без SSR с сервера с пакетными файлами будет обслуживаться только простой HTML с одним div (в основном), и ваша DOM будет инициализирована в браузере.Так что если у вас отключен JavaScript в вашем браузере, у вас будет только белый экран, что очень плохо для SEO.Когда приложения React отображаются на сервере, ваш код React выполняется на сервере, и полный ответ DOM после инициализации React отправляется в ответ в виде HTML.Таким образом, сайт загружается быстрее для пользователя, и даже если JavaScript отключен, страница будет загружаться, что дает преимущества SEO.