反応用のサーバー側レンダリングユーティリティを構築しています。私は使用していませんReactDOMServerとそれに関連するrenderToString方法。代わりに、アプリを軽量のサーバー側 DOM にレンダリングしています。個々のコンポーネントは (AJAX、setTimeout などを介して) 非同期にデータを読み込むことができ、すべての promise が解決されたら、最終的な HTML 文字列をブラウザーに送信します。非同期データはINLINE_CACHE、クライアントで使用するために名前が付けられた JavaScript 変数に格納されます。この部分は問題なく動作します。
クライアントでは、アプリ コンポーネントがドキュメントにマウントされます。子コンポーネントがデータを読み込もうとすると、データ コントローラーはINLINE_CACHEPromise をすぐに確認して解決できます。この部分も機能します。
各 promise が解決されるとsetState、再レンダリングをトリガーするデータを呼び出します。私の問題は、promise がすぐに解決されても、A+ 仕様に従って非同期的に解決されることです。これは、最初のレンダリングに必要なすべてのデータがないことを意味します。一瞬後 (場合によっては次のティック)、データがそこにあり、再レンダリングが行われます。しかし、最初のレンダリングがサーバーからの既存のマークアップ (および関連するチェックサム) と一致しないため、react は不平を言います...当然のことです。
私がする必要があるのは、アプリケーション コンポーネントをデタッチされた DOM ノード (または仮想 DOM のみ) で何らかの方法でレンダリングし、すべての約束が解決されるのを待ってから、ノードをドキュメントにマウントすることです。目標は、react がサーバーからレンダリングされた既存のマークアップを再利用しようとすることです。私はチェックサムなどを生成する方法を知っています - それは問題ではありません。実際のDOMにマウントするように指示するまで、アプリをメモリにレンダリングするために反応する必要があります-その時点で差分が発生します。これはReactで可能ですか？