2

为了清楚起见,我使用的是 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 的服务器端渲染,这一切真的有必要吗?

抱歉,问题很长,期待阅读您的答案。

4

1 回答 1

3
  1. 我这样做的方式与您在我当前正在处理的项目中的代码示例中所做的相同——我匹配 * 然后使用 React Router 呈现不同的页面。我写了一篇关于此的博客文章,其中包含代码示例

  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 调用后动态加载部分页面时
于 2017-02-26T19:58:58.250 回答