NodeJS HTML 渲染策略答案

【问题标题】：NodeJS HTML rendering strategyNodeJS HTML 渲染策略
【发布时间】：2015-09-24 10:24:45
【问题描述】：

我们想建立一个生产就绪的社交网络网站（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”问题上找不到任何东西，所以我可能没有看到它是正确的。

谢谢。

【问题讨论】：

在服务器上，您总是需要预先加载所有数据。我在任何地方都没有看到任何好的替代方案（当然，不会牺牲加载时间）。
我在上面添加了一个伪代码示例。我认为它确实允许从子组件中加载数据。
这些天谷歌的爬虫executes javascript。其他哪些爬虫对您来说是个问题？
您在使用模板时遇到了同样的问题，顺便说一句。除了挂载后客户端上发生的事情之外，react 只不过是一个模板系统，仅此而已。
如果每个组件都定义了自己的数据依赖关系，您可以使用您的节点路由中的顶级应用调用React.renderToStaticMarkup 以收集所有数据依赖关系，然后再调用React.renderToString 并呈现结果后端。跨度>

标签： javascript angularjs node.js reactjs isomorphic-javascript

【解决方案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} />
  }
}

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

【讨论】：