首页 文章

如何使用 api 对 server-side 做出反应?

提问于
浏览
2

为了说清楚,我正在使用 MongoDB,Express,React 和 Node 堆栈。

我正在努力学习 react.js。我得到了正确的基础知识,我能够用路由器编写一个简单的反应应用程序。我也试过 server-side 渲染一个简单的反应应用程序,它也很完美。但是,我现在有点困惑,因为我想用 rest api 和 server-side 渲染制作一个完整的应用程序。

  1. 我不知道如何分离服务器文件中的 api 和 react 代码。首先列出 api 调用,然后执行 server-side 渲染工作?像这样:
app.get('/api/whatever', function(req, res) {
    //get whatever
});
app.get('*', function(req, res) {
    //math routes and renderToString React
});
  1. 另外,我甚至无法测试上面的原因是,当我尝试使用 nodemon 运行服务器时,它会抛出一个错误,因为它不理解反应代码,我应该怎么做呢?我应该以某种方式配置 nodemon 读取 es6 或忽略它或配置 webpack 来运行快速服务器?

  2. 最后一个问题可以很容易地清除整个故事。我已经尝试找到答案,但却得到了许多相互矛盾的答案。 Google 抓取工具是否能够抓取 React 应用?我正在学习 server-side 渲染 SEO,这一切真的有必要吗?

抱歉,这是一个很长的问题,期待着阅读你的答案。

1 回答

  • 3
    • 我这样做的方式与我正在处理的项目中的代码示例相同 - 我匹配*然后使用 React Router 来呈现不同的页面。 我用一些代码示例写了一篇关于此的博客文章

    • 在我的设置中,我使用 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 抓取 client-side React 代码,但 server-side 渲染仍然是一个好主意,因为抓取结果可能不一致,尤其是在 Ajax 调用后动态加载页面的部分内容

相关问题