如何使用 api 在服务器端呈现反应？

Question

为了清楚起见，我使用的是 MongoDB、Express、React 和 Node 堆栈。

我现在正在尝试学习 react.js。我掌握了正确的基础知识，并且能够使用路由器编写一个简单的反应应用程序。我还尝试过在服务器端渲染一个简单的反应应用程序，它也可以完美运行。但是，我现在有点卡住了，因为我想制作一个带有 rest api 和服务器端渲染的完整应用程序。

1) 我不知道应该如何在服务器文件中分离 api 和 react 代码。会从列出 api 调用开始，然后进行服务器端渲染工作吗？ 像这样：

app.get('/api/whatever', function(req, res) {
    //get whatever
});
app.get('*', function(req, res) {
    //math routes and renderToString React
});

2）另外，我什至无法测试上述内容的原因是，当我尝试使用 nodemon 运行服务器时，它会抛出错误，因为它不理解反应代码，我应该怎么做呢？我应该以某种方式配置 nodemon 以读取 es6 还是忽略它或配置 webpack 以运行 express 服务器？

3) 最后一个问题可以很容易地弄清楚整个故事。我试图找到一个答案，但得到了许多相互矛盾的答案。谷歌爬虫是否能够爬取 React 应用程序？我正在学习 SEO 的服务器端渲染，真的有必要吗？

抱歉问题太长了，期待阅读您的回答。

Answer 1

1. 我的做法与您在我目前正在处理的项目中的代码示例中的做法相同——我匹配 *，然后使用 React Router 呈现不同的页面。 I wrote a blog article about this, with code examples.

2. 在我的设置中，我使用 webpack 来编译我的后端代码，就像我使用前端代码一样。我使用 watch 机制来监听代码的变化，并在重新编译后自动重启节点服务器。不需要nodemon。

#!/usr/bin/env node

const path = require('path');
const webpack = require('webpack');
const spawn = require('child_process').spawn;
const serverConfig = require('webpack.config.server');

const compiler = webpack(serverConfig);
const watchConfig = {
    aggregateTimeout: 300,
    poll: 1000,
    ignored: '**/*.scss'
};

let serverControl;

compiler.watch(watchConfig, (err, stats) => {
    if (err) {
        console.error(err.stack || err);
        if (err.details) {
            console.error(err.details);
        }
        return;
    }

    const info = stats.toJson();

    if (stats.hasErrors()) {
        info.errors.forEach(message => console.log(message));
        return;
    }

    if (stats.hasWarnings()) {
        info.warnings.forEach(message => console.log(message));
    }

    if (serverControl) {
        serverControl.kill();
    }

    serverControl = spawn('node', [path.resolve(__dirname, '../../dist/polly-server.js')]);
    serverControl.stdout.on('data', data => console.log(`${new Date().toISOString()} [LOG] ${data}`));
    serverControl.stderr.on('data', data => console.error(`${new Date().toISOString()} [ERROR] ${data}`));
});

1. 是的，Google 会抓取客户端的 React 代码，但服务器端渲染仍然是个好主意，因为抓取结果可能会不一致，尤其是在 Ajax 调用后动态加载部分页面时