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来运行快速服务器？

3）最后一个问题可以很容易地清除整个故事。我试过找到一个答案，但却找到了很多相互矛盾的答案。 Google抓取工具是否能够抓取React应用？我正在学习SEO的服务器端渲染，这一切都非常必要吗？

很抱歉这个长期的问题，期待阅读你的答案。

Answer 1

我这样做的方式与我正在处理的项目中的代码示例相同 - 我匹配*然后使用React Router来呈现不同的页面。 I wrote a blog article about this, with code examples
在我的设置中，我使用webpack来编译我的后端代码，就像我使用前端代码一样。我使用监视机制来监听代码更改并在重新编译后自动重新启动节点服务器。不需要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代码，但服务器端渲染仍然是一个好主意，因为抓取结果可能不一致，尤其是在Ajax调用后动态加载部分页面时

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

1 个答案: