2017-02-26 60 views
1

为了说清楚,我使用了MongoDB,Express,React和Node堆栈。如何使用api在服务器端进行反应?

我在努力学习react.js。我掌握了基本知识,并且能够使用路由器编写简单的反应应用程序。我也尝试过在服务器端渲染一个简单的反应应用程序,它也可以很好地工作。不过,我现在坚持认为我想用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运行express服务器?

3)最后的问题可以很容易地清楚这个整个故事。我试着找到一个答案,但得到了许多相互矛盾的答案。 Google抓取工具能够抓取React应用吗?我正在学习服务器端的搜索引擎优化,是否真的有必要?

对不起,很长的问题,期待阅读你的答案。

+0

作为第二个app.get函数中的响应,您给出了什么? –

+0

app.get( “*”,功能(REQ,RES){ ReactRouter.match({路线:AppRoutes,位置:req.url}, 功能(ERR,redirectLocation,renderProps){ 如果(ERR){ res.send(500,err.message) }否则如果(redirectLocation){ res.redirect(302,redirectLocation.pathname + redirectLocation.search) }否则如果(renderProps){ res.send(200,ReactDOMServer .renderToString()) } else { res.send(404,'Not found') } }); }); – YT98

+0

我将在问题中添加整个函数作为编辑。这看起来不正确... – YT98

回答

3
  1. 我去做了,你在项目中的代码示例做同样的办法,我目前的工作 - 我匹配*,然后利用路由器做出反应来呈现不同的页面。 I wrote a blog article about this, with code examples

  2. 在我的设置中,我使用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}`)); 
 
});

  • 是,谷歌抓取客户端阵营代码,但服务器端渲染仍然是一个好主意,因为抓取结果可能是不一致的,尤其是当您在Ajax调用后动态加载页面的某些部分
  • +0

    谢谢你的回答,这正是我所希望的。但是,在博客文章的演示中,您可以从git hub api获取数据。在server.js文件中生成一个API会起作用吗? '*'与'/ api'是否冲突,因为它处理所有请求?我想我会试试看看会发生什么。 – YT98

    +0

    没有冲突,只要确保您的*匹配最后一次,订单就很重要 –

    相关问题