Question

我想从nodeJS服务器提供一个ReactJS单页应用程序，并同时传递一些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>

现在，在您的React应用程序中，使用键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

为ReactJS应用提供预填充JSON数据的服务

1 个答案: