問題タブ [angular-universal]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
angular-universal - Angular Universal: パフォーマンス、サーバー負荷はどうですか?
angular2を事前にレンダリングすることで、パフォーマンスとサーバーの負荷について学習しようとしました。小さなアプリケーションをテストしました。
大規模なアプリケーションやオンライン ショップの事前レンダリングの経験がある方に質問がありますか? 事前レンダリングは効率的ですか?
javascript - Angular Universal の利点と実装?
古代のウェブサイト:
- ユーザーが bar または href を介して URL に移動すると、その特定のページに対してサーバー呼び出しが行われます
- ページが返されます (静的 html または ASP.NET MVC によってサーバー上でレンダリングされた html など)。
- すべてのページがすべてをリロードし、遅いため、SPA に行く理由
Angular 2 SPA:
- ユーザーはバーまたはルーター経由で URL に移動します
- コンポーネントの html/javascript に対してサーバー呼び出しが行われます。
- navbarなどではなく、ルーターアウトレット内のもののみがロードされます（SPAの主な利点）
- ただし、html は実際にはサーバーからそのまま受信されるわけではありません。Angular 2 コード/マークアップは、ブラウザが理解できるプレーンな HTML として表示される前にクライアントで処理されます。遅いですか? Angular Universal に入りますか?
角度ユニバーサル:
アプリケーションを初めて使用するユーザーは、サーバーでレンダリングされたビューを即座に見ることができ、知覚されるパフォーマンスと全体的なユーザー エクスペリエンスが大幅に向上します。
つまり、要するに：
- ユーザーは検索バーまたはルーターを介して URL に移動します
- Angular コンポーネントを返す代わりに、Angular Universal は実際にそれらのコンポーネントを html に変換し、クライアントに送信します。これが唯一の利点です。
TLDR:
- Angular Universal が正しいことを理解しているでしょうか? （上記の最後の箇条書き）。
- そして最も重要なことは、私がそれが何をするかを理解していると仮定すると、どのようにこれを達成するのでしょうか? 私の理解では、IISまたは何でも要求されたリソースを返すだけなので、Angular Universalはそれらをどのように前処理しますか(編集:基本的に、処理されたhtmlを返すAPIに似たものを実行します)?
- これは、サーバーが最初のビューを表示するために必要なすべての最初の API 呼び出しを行うことを意味します。たとえば、ルート解決から...正しいですか?
編集：質問を絞り込むために、このアプローチに焦点を当てましょう：
2 つ目の方法は、リクエストごとに Web サーバーでアプリケーションを動的に再レンダリングすることです。スケーラビリティとパフォーマンスを向上させるために、このアプローチで使用できるいくつかのキャッシング オプションがまだありますが、リクエストごとに Angular Universal のコンテキスト内でアプリケーション コードを実行することになります。
ここでのアプローチ：
最初のオプションは、アプリケーションを事前にレンダリングすることです。つまり、ユニバーサル ビルド ツール (gulp、grunt、broccoli、webpack など) のいずれかを使用して、ビルド時にすべてのルートの静的 HTML を生成します。次に、その静的 HTML を CDN にデプロイできます。
私を超えています。大量の動的コンテンツがあることを確認しながら、静的 html をプリロードします。
css - Angular Universal CSS のインポートが機能しない
Angular Universal がサードパーティの JavaScript および CSS ライブラリのインポートを処理する方法をテストしているところです。使いやすさのために、jQuery と Bootstrap を試してみました。
Universal Starter リポジトリhttps://github.com/angular/universal-starterを使用し、 npm を介して jQuery と Bootstrap をインストールしました。
私app.component.tsはそのようにjQueryを含めましたが、それは完全に機能します。
cssファイルをインポートしたいのですが、うまくいきません。app/client.ts次のようにファイル内にインポートしています。
実際の Bootstrap css は Webpack バンドル内にありますが、HTML のスタイルはまったく設定されていません。誰もこれで同様の問題を抱えていて、この問題を解決する方法を知っていますか?
angular - 事前にレンダリングされたファイルを S3 にアップロードし、Web ページの初期ロード時にアクセスする方法は?
Angular Universal Starter kit を使用して Web アプリケーションを実装しました。最初のページがより速く読み込まれるように、事前にレンダリングされたファイルを S3 バケットにアップロードしたいと考えています。