web-dev-qa-db-ja.com

AngularJS-サーバー側のレンダリング

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

誰かがjsdomまたはZombieJSでAngularJSをレンダリングできた？ Node.jsでのこれらのdom/browserエミュレーションは、理論的には単純なサーバー側Angular templatingには十分ですが、グーグルでの結果はあまり決定的ではありませんでした。

node.jstemplatesangularjsrenderingserver-side
73
tillda

別のソリューションを次に示します。 https://github.com/ithkuil/angular-on-server

wiki 詳細

そのレポの著者からの更新：それは約6年前（この編集時）でした。この時点で、おそらく https://angular.io/guide/universal または単に https://prerender.io/ を使用しているはずです。

13
outluch

この新しいパッケージ https://github.com/a-lucas/angular.js-server を使用すると、Angularアプリケーションを事前レンダリングし、HTMLをクライアントは、jsコードを実行します。

URLごとのキャッシュをサポートし、URLの事前レンダリングをアクティブにするルールを定義できます。

PS：私はこのパッケージの主な貢献者です。

6
Antoine Lucas

AngularJSはjsdomコンテキストと連携して動作します。 angular.jsをjs srcリストに追加し、angular appの初期化時にjsdomにメインページを追加します。

したがって、レンダリングは非常に簡単です。jsdomでangularを使用するだけで機能します。ブラウザに配置するのは多少困難です。

1つの方法は、DOM変更のバッチ同期です。

サーバーからクライアントへの動的な更新を取得するには、MutationEventsを使用できます（残念ながら、jsdomはMutationObserversをサポートしていませんが、MutationEventsは非常に高速に動作します）。それらを使用して、アキュムレータ配列のDOMの変更を積み重ね、定期的に（たとえば、25ミリ秒ごとに）クライアントブラウザーにプッシュします。

また、ユーザーイベントを有効にするには、ブラウザーでドキュメント単位でそれらを追跡し、類似性が蓄積されてサーバーにプッシュされる必要があります。

そのようなアプローチの実装の1つにjsdom-sync（ https://www.npmjs.org/package/jsdom-sync ）

サーバー側レンダリングの欠点は、DOMボックスモデルサイズがないことです。要素の幅/高さを取得するには、実際にレンダリングする必要があるためです。このソリューションは、svgなどにほとんど適合しないことを意味します。

また、スコープモデルを見て、ブラウザ側のスコープと同期することを検討することもできますが、それはまったく別の話です。

5
setec

私も解決策を探しています。ただし、ブラウザを使用してサーバー上でhtmlをレンダリングし、フロントエンドに送信することはできません。 Airbnbは最初に試してみましたが、速度が遅く、リソースが空いているため拒否されました。実稼働ソリューションではありません。

更新：これはObject.observeの導入によりすぐに可能になります;）

4
Aleksandrenko

AngularJS 2.0はサーバーでも動作します。 Vojta Jinaは「JavaScript Jabber」ショー＃109でそれについて語っています- http://javascriptjabber.com/109-jsj-dependency-injection-in-javascript-with-vojta-jina-misko-hevery/ =（プレーヤーで32:30）。新しいAngularJSの依存性注入モジュールへのリンクがあります- https://github.com/angular/di.js 。

4
bullgare

これは少し遅い回答であることを知っています、angular.js-server（ https://github.com/a-lucas/angular.js-server ）はangularすべてのajaxリクエストと$ compileイベントが処理されるタイミングを検出するために必要なアイドル状態をトリガーします。

Mean.jsスタックをほとんど変更することなくプリレンダリングできました。

2
Ant

1つのアプローチは、HTML要求をphantomjsを実行しているnodejsサーバーにルーティングすることです。 phantomjsに基づくアプローチを使用しました。解決したらチェックしてください

http://himangshu.io/blog/optimizing-single-page-application-using-prerender/

2
himangshuj

@ dai-shiがconnect-prerendererを作成しました。 here を参照してください。まだいくつかの問題がありますが、うまくいけば良いスタートです

2
Lior

これはパフォーマンスは高くありませんが、私は単純な HeorkuのPhantomJSサーバー に取り組んでいます。これはすべてのクライアントJSを解析します。具体的には、AngularおよびRails=を使用して、ボットリクエストにHTMLを提供します。

1
smothers