問題タブ [server-side-rendering]

ご存じかもしれませんが、AirBnb は Rendr をオープンソース化しました ( http://nerds.airbnb.com/weve-open-sourced-rendr )。これにより、バックボーンアプリのサーバー側レンダリングが可能になります。サーバー上でテンプレート レンダリングの最初の「反復」を実行でき、クライアントは完全にレンダリングされた HTML ドキュメントと JS アプリ全体を取得できるため、これは素晴らしいことです。これにより、表示までの時間が大幅に短縮され、他のサーバー側のテンプレート システムを取り除くことができます。

それで、誰かが jsdom または ZombieJS で AngularJS をレンダリングできましたか? Node.js でのこれらの dom/browser エミュレーションは、理論上は単純なサーバー側の Angular テンプレート作成には十分なはずですが、Google で調べた結果はあまり決定的なものではありませんでした。

反応用のサーバー側レンダリングユーティリティを構築しています。私は使用していませんReactDOMServerとそれに関連するrenderToString方法。代わりに、アプリを軽量のサーバー側 DOM にレンダリングしています。個々のコンポーネントは (AJAX、setTimeout などを介して) 非同期にデータを読み込むことができ、すべての promise が解決されたら、最終的な HTML 文字列をブラウザーに送信します。非同期データはINLINE_CACHE、クライアントで使用するために名前が付けられた JavaScript 変数に格納されます。この部分は問題なく動作します。

クライアントでは、アプリ コンポーネントがドキュメントにマウントされます。子コンポーネントがデータを読み込もうとすると、データ コントローラーはINLINE_CACHEPromise をすぐに確認して解決できます。この部分も機能します。

各 promise が解決されるとsetState、再レンダリングをトリガーするデータを呼び出します。私の問題は、promise がすぐに解決されても、A+ 仕様に従って非同期的に解決されることです。これは、最初のレンダリングに必要なすべてのデータがないことを意味します。一瞬後 (場合によっては次のティック)、データがそこにあり、再レンダリングが行われます。しかし、最初のレンダリングがサーバーからの既存のマークアップ (および関連するチェックサム) と一致しないため、react は不平を言います...当然のことです。

私がする必要があるのは、アプリケーション コンポーネントをデタッチされた DOM ノード (または仮想 DOM のみ) で何らかの方法でレンダリングし、すべての約束が解決されるのを待ってから、ノードをドキュメントにマウントすることです。目標は、react がサーバーからレンダリングされた既存のマークアップを再利用しようとすることです。私はチェックサムなどを生成する方法を知っています - それは問題ではありません。実際のDOMにマウントするように指示するまで、アプリをメモリにレンダリングするために反応する必要があります-その時点で差分が発生します。これはReactで可能ですか？

注:私は美しいライブラリのreact-railsを使用していますが、私の問題を理解している限り、答えに影響を与えるべきではありません。

<Component />これは<Map />、サーバー側では意味がないため、クライアント側のレンダリングを意味します（少なくとも私が使用しているライブラリはそうしません）。

代わりに、クライアント側の準備が整う前に画像を表示して、スキューモーフィズムの原則を適用したいと考えています。

基本的に、これは私が持っていることを意味します：

私の現在の理解でcomponentDidMountは、テンプレート文字列が生成されるときにサーバー側で呼び出されます。コンポーネントが実際にクライアント側にマウントされていることを確認して、画像を実際のマップに置き換えるにはどうすればよいですか?

クライアント側のアニメーションに ReactJS アプリ内で GSAP を使用しようとしています。npm を使用して gsap モジュールをインストールし、モジュール内で gsap を使用しようとすると、次のエラーが発生します。

ReactJS でコーディングする方法はありますか: サーバー上でレンダリングする場合、ドキュメントがないため、gsap をロードしないでください。ただし、コンパイルされた bundle.js (クライアント側でクライアントを引き継ぐ反応 js) がダウンロードされたら、gsap を使用します。文書が存在するからですか？

私が現在使用している回避策は、gsap を index.ejs に埋め込むことです。

更新: webpack.config.js