Приложение ReactJS для обслуживания с предварительно заполненными данными JSON

Question

Я хотел бы подать одностраничное приложение ReactJS с сервера nodeJS и одновременно передать некоторые данные JSON.

У меня есть учетные данные пользователя и некоторые другие пользовательские данные, которые я хотел бы предварительно-пополняется на моей странице и не допускает многократных обращений к серверу.

Как передать объект JSON клиенту во время запроса и сделать его доступным для моего приложения React

var path = require('path');
const express = require('express');
const app = express();
const port = process.env.PORT;

app.use(express.static('dist'));

app.get('/*', function(req, res) {
  res.sendFile(path.join(__dirname, '../../dist/index.html'));
});

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

Answer 1

Я могу предложить вам добавить тег script в ваш файл index.html.Как показано ниже

<script>
  window._DATA_={ key: 'value', .....}
</script>

Теперь в вашем приложении реагирования используйте ключ window._DATA_, чтобы получить данные, отправленные с сервера.При таком подходе проблема заключается в том, что вы не можете отправлять динамические данные .

. Для этого вам может потребоваться использовать библиотеки шаблонов.Например, pug, nunjucks, ejs и т. Д.

Ниже приведен пример использования pug.

Ваш экспресс-маршрут будет выглядеть следующим образом.

app.get('/*', function(req, res) {
  res.render('index', data);
});


// End of your pug file looks like
...
...
script.
  var window._DATA_= !{JSON.stringify(data)}

Если вы хотите динамически добавлять файлы сценариев, вы можете использовать html-webpack-pug-plugin.

Для получения дополнительной информации https://www.npmjs.com/package/html-webpack-pug-plugin