1

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

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

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

看过 React 之后，这似乎是一个不错的选择，但我担心一件事 - 开箱即用，您需要在路由级别而不是组件级别加载所有数据（因为 renderToString是同步的 - 请参阅此处的讨论

如果我们传递 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”问题上找不到任何东西，所以我可能没有正确地看到它。

谢谢。

4

1 回答 1

1

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

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} />
  }
}

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

于 2015-07-07T06:17:08.070 回答