NodeJS HTML呈现策略

我们要build立一个生产就绪的社交网站(Facebook或Instagram风格)。 我们计划在服务器端使用Node,并且正在寻找在服务器端渲染视图组件的最佳技术。

search引擎优化友好是必须的,所以angular度似乎不是一个合适的(除非任何人可以提倡Prerender.io作为一个坚实的select)。

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

看了React,看起来这是一个不错的select,但是有一件事我很担心 – 事实上,你需要加载路由级的所有数据,而不是组件级(因为renderToString是同步的 – 请参阅这里的讨论

我真的不明白,如果我们传递React,那么服务器端渲染将是一个强大的替代scheme。

如果我正确地理解了,基本的方法(允许子组件内的asynchronous加载)就像这样:

// 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引擎”上find所谓的问题,所以可能我没有正确的看到它。

谢谢。

       

网上收集的解决方案 "NodeJS HTML呈现策略"

基本上,解决scheme归结为使用一个约定,其中每个组件都有一个静态函数,它返回它所需要的数据,并在它所需的组件上调用相同名称的函数。 这大致是这样的:

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

或者你可以找出树顶部的所有数据需求,但是更简单的是,它更脆弱。 这是你用模板做的。