ご存じかもしれませんが、AirBnb は Rendr をオープンソース化しました ( http://nerds.airbnb.com/weve-open-sourced-rendr )。これにより、バックボーンアプリのサーバー側レンダリングが可能になります。サーバー上でテンプレート レンダリングの最初の「反復」を実行でき、クライアントは完全にレンダリングされた HTML ドキュメントと JS アプリ全体を取得できるため、これは素晴らしいことです。これにより、表示までの時間が大幅に短縮され、他のサーバー側のテンプレート システムを取り除くことができます。
それで、誰かが jsdom または ZombieJS で AngularJS をレンダリングできましたか? Node.js でのこれらの dom/browser エミュレーションは、理論上は単純なサーバー側の Angular テンプレート作成には十分なはずですが、Google で調べた結果はあまり決定的なものではありませんでした。
AngularJS は、トリックなしで jsdom コンテキストで動作します。angular.js を js src リストに追加し、angular アプリのメイン ページを初期化時に jsdom に追加するだけです。
したがって、レンダリングは非常に単純です。jsdom で angular を使用するだけで機能します。ブラウザに入れるのはやや難しいです。
1 つの方法は、DOM の変更をバッチ同期することです。
サーバーからクライアントへの動的更新を取得するには、MutationEvents を使用できます (残念ながら、jsdom は MutationObservers をサポートしていませんが、MutationEvents は非常に高速に動作します)。それらを使用して DOM の変更をアキュムレータ配列に積み上げ、クライアント ブラウザに定期的に (たとえば、25 ミリ秒ごとに) プッシュします。
また、ユーザーイベントを有効にするには、ブラウザーでドキュメントごとに追跡し、同様に蓄積してサーバーにプッシュする必要があります。
このようなアプローチの実装の 1 つが jsdom-sync ( https://www.npmjs.org/package/jsdom-sync )です。
サーバー側レンダリングの欠点は、要素の幅/高さを取得するには実際にレンダリングする必要があるため、DOM ボックス モデル サイズがないことです。このソリューションは、svgなどにはほとんど適合しないことを意味します..
また、スコープ モデルを監視してブラウザ側のスコープと同期することを検討することもできますが、それはまったく別の話です。
私も解決策を探しています。ただし、ブラウザーを使用してサーバー上で html をレンダリングし、それをフロントエンドに送信することはできません。Airbnb は最初に試してみましたが、速度が遅く、リソースを大量に消費しているため拒否されました。これは生産ソリューションではありません。
更新: Object.observe の導入により、これはすぐに可能になります ;)
これは少し遅い答えであることは知っていますajax リクエストと $compile イベントが処理されます。
ほとんど変更を加えずに mean.js スタックをプリレンダリングすることができました。
@dai-shi が作成した connect-prerenderer については、こちらを参照してください。まだいくつかの問題がありますが、うまくいけば良いスタートです
私はそれがまだ誰かを助けることができることを願っていますが、ここに私が作成したnpmパッケージがあります: