1

プロダクション対応のソーシャル ネットワーク Web サイト (Facebook または Instagram スタイル) を構築したいと考えています。サーバー側で Node を使用する予定で、サーバー側でビュー コンポーネントをレンダリングするための最適なテクノロジを探しています。

SEO 対応は必須であるため、Angular は適していないように思えます (誰もが確実な選択肢として Prerender.io を提唱できる場合を除きます)。

また、ほとんどのレンダリングがサーバーで行われ、更新はクライアントで行われるように、AJAX をサポートしたいと考えています。

React を見ると、これは良い選択のように思えますが、私が心配していることが 1 つあります。箱から出してすぐに、すべてのデータをコンポーネント レベルではなくルート レベルでロードする必要があるという事実です (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. テンプレート エンジン」と呼ばれる問題については何も見つからないため、正しく認識されていない可能性があります。

ありがとう。

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 に答える