サーバー側が反応して私たちは、当社のウェブサイトを構築している

Question

をフェッチ/私たちは、データソースからのデータで満たされる必要がある私達のページをレンダリングするサーバ側にしたい

反応し、ルータ/ Reduxの。このトランザクションは非同期でなければならず、残念なことにサーバーサイドのレンダリングが必要なので、 "componentDidMount"関数を使用することはできません。あなたがルータに反応のようなものを使用した場合、あなたはまた、静的なFetchDataとして依存関係を取得 あなたのデータを表現する場合があります

：セクションhereレンダリングサーバ側でReduxのチュートリアルページでは、に

を知らされていましたあなたの ルートハンドラコンポーネントの（）メソッドを呼び出します。それらは非同期アクションを返す可能性があります。したがって、 handleRender関数はルートハンドラ コンポーネントクラスへのルートと一致し、それぞれについてfetchData（）の結果を送出し、 はプロミスが解決された後にレンダリングされます。このように、異なるルートに必要な特定の APIコールは、ルート ハンドラコンポーネント定義と一緒に配置されます。クライアント側の でも同じ方法を使用して、 のデータがロードされるまで、ルータがページを切り替えるのを防ぐことができます。

これは現在、データの取り込みを処理する方法です。私は個人的にはこのアプローチが気に入らず、非常に不器用に見え、ルーティングライブラリにも結合されています。それを行うためのよりよい方法がありますか？うまくいけば標準的な反応/ルータ/ reduxコンポーネントでですか？

Answer 1

静的なようなものは、一般的なケースでReact Routerでデータを取得する正しい方法ですが、必要に応じて子コンポーネントに到達できます（Relayの動作など）。

このようにしたい理由は、React Routerがすべての一致したルートを一度に解決するからです。それで、すべてのルートハンドラのデータフェッチを同時に実行できます。

代わりに、コンポーネントのインスタンスレベルのハンドラにデータフェッチを関連付けると、すべての親が必要なデータを受け取るまで、コンポーネントが必要なデータをフェッチすることができないなど、フェッチすることになります。 。サーバー上ではそれほど大きな問題ではないかもしれませんが、クライアント上では非常に最適ではありません。

実際にコンポーネントにデータ依存関係を配置する場合は、React Resolverのようなものを使用することを検討することができますが、これはユーザーにとって最適ではない状況に簡単につながります。