NodeJS HTML 渲染策略

Question

我们想建立一个生产就绪的社交网络网站（Facebook 或 Instagram 风格）。我们打算在服务器端使用Node，正在寻找最好的服务器端渲染视图组件的技术。

SEO 友好性是必须的，所以 Angular 似乎不太合适（除非有人可以提倡 Prerender.io 作为可靠的选择）。

我们还希望支持 AJAX 这样大部分渲染将在服务器上完成，但更新将在客户端完成。

看过 React 后，它似乎是一个不错的选择，但有一件事我很担心 - 事实上开箱即用，您需要在路由级别加载所有数据，而不是组件级别（因为 renderToString 是同步的 - 请参阅 the discussion here

如果我们放弃 React，我真的不明白什么是服务器端渲染的可靠替代方案。

如果我理解正确，基本方式（允许从子组件内异步加载）类似于：

  // The main page route
app.get('/',function(){
  var html = renderBase();
  renderHeader(html)
    .then(
    renderFeed(html)
  ).then(
    renderFooter(html)
  );
})

renderBase = function(){
  return = "<html><body>..."
}

renderHeader = function(){

  someIoFunction(function(){

    // build HTML based on data

  })

}

貌似使用Jade之类的模板引擎可能会减轻我们的一些负担，但是我似乎找不到关于这个"React vs. Templating engine"所谓问题的任何东西，所以我可能没有看到正确。

谢谢。

Answer 1

基本上，解决方案归结为使用一种约定，其中每个组件都有一个静态函数，其中 returns 它需要的数据，并且它在它需要的组件上调用同名函数。大致是这样的：

class CommentList {
  static getData = (props) => {
    return {
      comments: api.getComments({page: props.page})
    };
  }
}

class CommentApp {
  static getData = (props) => {
    return {
      user: api.getUser(),
      stuff: CommentList.getData({page: props.commentPage})
    };
  }
  render(){
    return <CommentList comments={this.props.stuff.comments} />
  }
}

或者您可以在树的顶部找出所有数据要求，但是虽然开始起来更简单，但它更脆弱。这就是您使用模板所做的。

NodeJS HTML 渲染策略

NodeJS HTML rendering strategy

javascript

node.js

angularjs

reactjs

isomorphic-javascript