我有一个简单的应用程序,显示用户的评论列表。单击用户后,应用应转到/users/<id>
并显示一个新页面,其中包含将从MongoDB查询的用户详细信息。我很难理解逻辑应该在哪里。
我在客户端看到了使用react路由器的示例,如:
render((
<Router>
<Route path="/" component={App}>
<Route path="/user/:userId" component={User}/>
</Route>
</Router>
), document.body)
但在服务器端也是如此:
<Route name="root" path="/" handler={require('./handlers/Root')}>
还使用快速路由:
app.get('/', function home (req, res, next) {
res.render('layout', {
reactHtml: React.renderToString(<App />)
});
});
app.get('/user', function home (req, res, next) {
res.render('layout', {
reactHtml: React.renderToString(<User />)
});
});
哪一个是要走的路?有什么区别?
答案 0 :(得分:2)
React应用程序通常最初只是客户端,如您所注意到的那样附加到节点。这就是它如此快速的原因:只有API调用,没有重新渲染。
同构应用程序也在服务器上运行,这有助于回退(没有JS)以及SEO和社交共享(Facebook需要阅读HTML元标记。这根本不容易实现。你可以也可以从服务器渲染中获得真正的花哨和保湿效果,从而加速用户在这些深层页面上的体验。
您可能永远不会想要的只是渲染服务器端。有点想念React的全部力量。
启动客户端,使用一些好的样板文件,例如https://github.com/erikras/react-redux-universal-hot-example,它将带您一直到同构并再次返回。
答案 1 :(得分:0)
通过反应,您可以创建单页应用程序,因此您永远不会重新加载页面,快递您正在使用php制作像apache这样的服务器