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引擎”所谓的问题上找到任何东西，所以可能我没有看到它正确。

感谢。

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

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

NodeJS HTML呈现策略

1 个答案: