検索エンジン用ReactJSサーバー側非同期

Question

Webサイトサーバー側にReactJS + Router をレンダリングしています。多くのコンポーネントがコンテンツを生成するためにREST呼び出しを行います。このコンテンツは、非同期呼び出しであるため、HTMLサーバー側として送信されません。

次のようになりますコンポーネント：私は明らかに私の要素（アイテム）を希望しながら、

import React from 'react' 
import ReactDOM from 'react-dom' 
// Imports omitted 

export default class MyPage extends React.Component { 
    constructor() { 
     super(); 
     this.state = {items: []}; 
      fetch("http://mywebservice.com/items").then((response) => { 
       response.json().then((json) => { 
        this.setState({items: json.items}) 
       }).catch((error) => {}); 
      }); 
    } 

    render() { 
     if (this.state.items && this.state.items.length > 0) { 
      var rows = []; 
      // Go through the items and add the element 
      this.state.items.forEach((item, i) => { 
       rows.push(<div key={item.id}></div>); 
      }); 
      return <div> 
        <table> 
         {rows} 
        </table> 
      </div>; 
     } 
     else { 
      return <span>Loading...</span> 
     } 
    } 
} 

検索エンジンだろうインデックス「読み込んでいます...」インデックス化。これを解決する方法はありますか？

Answer 1

チェックアウトreact-async（https://www.npmjs.com/package/react-async）またはreact-async-render（https://www.npmjs.com/package/react-async-render）

が鳴ります。

Answer 2

理論的には、サーバ側のリクエストハンドラで必要なデータをすべて収集し、それを初期状態のJSON文字列としてReactDOM.RenderToString()に渡してから、最初のデータが存在するかどうかを確認するカスタムfetch()を作成します、そうならhtmlをすぐにレンダリングします。

Answer 3

reduxが普及している理由の1つは、データ分離を強制することです。理想的には、レンダリングするすべてのデータアプリケーションを指定する単一の場所があります。あなたは店舗になりますが、一番上の要素の小道具にすべてのデータを格納すると仮定しましょう。そうであれば、すべての関連する小道具をその最上位の要素に提供するだけでよいのですが、すべてのものをうまく表現できます。しかし、必要なすべてのデータを収集する方法はサーバーに依存します。私は現在のURLとログインしているユーザー情報（トークンかクッキーなのか）からその手がかりを得ることを提案します。それはあなたが必要なものだけだよう