如何使用 api 在服务器端渲染反应？

Question

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

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

1) 我不知道应该如何分离服务器文件中的 api 和反应代码。是否会从列出 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 配置为运行快速服务器？

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

抱歉问题太长了，期待看到您的回答。

Answer 1

我的做法与您在我当前正在处理的项目中的代码示例中的做法相同——我匹配 * 然后使用 React Router 呈现不同的页面。 I wrote a blog article about this, with code examples.
在我的设置中，我使用 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}`));
});

是的，Google 抓取客户端 React 代码，但服务器端渲染仍然是一个好主意，因为抓取结果可能不一致，特别是如果您在 [=32] 之后动态加载部分页面=] 来电

如何使用 api 在服务器端渲染反应？

How to render react on server-side with an api?

rest

express

reactjs

server-side-rendering

mern