Angular Universal In Practice – How to build SEO Friendly Single Page Apps with Angular

ここ数か月、Angular について、クライアント アプリを構築するためにそれをどう使用するかがたくさん語られてきましたが、その最も重要な革新の1つが、実際にはサーバー上で起こっています。 Angular Universal です。 その詳細について説明します。

シングル ページ アプリの長所

なぜどこでもシングル ページ アプリを使用しないのでしょうか?シングル ページ アプリの SEO 効果の理解

Angular Universal とは、何を可能にするか

  • サーバーサイドレンダリングとは、単にサーバー上でレンダリングすることではない
  • サーバーサイドレンダリングのシングルページアプリのデモ
  • ビルド時のプリレンダリング – Amazon S3 にプリレンダリングのアプリをアップロード
  • アンギュラー版のキラー機能です。 Dependency Injection
  • 結論
  • この投稿は Angular Universal の入門編です。 実際の使用方法を網羅したより詳細なガイドについては、こちらの投稿をご覧ください。

    Angular Universal: a Complete Practical Guide

    Advantages of Single Page Applications

    Single Page Apps はしばらく前から存在し、Angular、React、Ember のフレームワークはおそらく Javascript 界で最も注目されるライブラリとなっています。

    SPA の利点は本当に 1 つだけです

    シングル ページ アプリの利点は潜在的にたくさんあります:

    • ユーザーがページ上を移動するとき、ページの一部だけが置き換えられるので、より流動的な体験になる
    • ページの最初のロード後は、ユーザーがアプリを移動するときにデータだけがワイヤ上を通過するようになる。 JSON はブラウザに配信され、ブラウザに直接 HTML テンプレートが適用されます。
    • これにより、パフォーマンスが向上し、バックエンド サービスはデータを返すだけなので、他のことに使用する可能性が開けます。 ページの読み込みに 200ms 以上かかる場合、ビジネスや販売に大きな影響を与える可能性があります (Google のこの研究を参照)。 これは、アプリが遅くなりがちなモバイル デバイスではなおさらです。

      Why not use SPAs everywhere then?

      これらの統計と SPA がはるかに向上したユーザー エクスペリエンスを提供するという事実を考えると、なぜ誰もがすべてにシングル ページ アプリを使用しないのでしょうか。

      シングル ページ アプリの SEO の意味を理解する

      シングル ページ アプリが今のところどこでも使用されていないのには、1 つの大きな理由があります (2 つの別々の原因があります)。

      Single Page Apps don’t perform well on search engines

      その理由は 2 つあります。

      検索エンジンは、ページの完了を「推測」する必要があります

      単一ページが取得されると、検索エンジンは非常にわずかな HTML しか見ません。 MVC フレームワークが起動したときのみ、サーバーから取得したデータを使用して、ページが実際に完全にレンダリングされます。

      問題は、検索エンジンは Javascript フレームワークがページのレンダリングを終了したときに推測する必要があるので、不完全なコンテンツをインデックスする危険性があることです。

      SPA が検索エンジンでうまく機能しない理由の 2 つ目は、次のとおりです。

      SPA のディープ リンクはインデックスされにくい

      ブラウザで HTML5 履歴をサポートしていないため、単一ページ アプリは HTML ブックマーク アンカー (/home#section1 など、# が付いた URL) でそのナビゲーション URL をベースにしています。 これを行う方法はありますが、面倒であり、単なる HTML を使用するのとは対照的に、正しくインデックスさせるのは常に困難です。

      結論として、最も簡単に移動できるサイトを持つことに意味はなく、その構築方法によって優れた SEO 対策ができないなら、意味がないと言えます。 また、IE9 の最近の非推奨は、HTML5 履歴がほぼすべての場所で利用できることを意味し、SPA ではアンカー URL の使用が不要になり、プレーン URL (/home/section1 など) を使用できるようになりました。 たとえば、Baidu は中国 (現在の人口は 13 億人) のトラフィックの半分以上を駆動します。

      また、パフォーマンスの問題も残っています。

      すべての世界の最良のものを手に入れ、インスタント ナビゲーション、SEO フレンドリー、モバイルでの高いパフォーマンスの両方を得る方法はありますか

      答えは「はい」で、Angular Universal があります。

      簡単に言うと、Angular Universal は、シングル ページ アプリのパフォーマンスとユーザー エンゲージメントの利点と、静的ページの SEO フレンドリーさの両方を兼ね備えたアプリを構築することを可能にします。 サーバーサイド レンダリング」という用語から、Angular Universal が行うことは、たとえば、Jade のようなサーバーサイド テンプレート言語に似ていると考えることができます。 しかし、これにはもっと多くの機能があります。

      Angular Universal では、サーバー上で最初の HTML ペイロードをレンダリングしますが、クライアント上で Angular の縮小版を起動し、そこから Angular がシングル ページ アプリとしてページを引き継ぎ、そこからサーバーではなくクライアント上ですべての HTML を生成するのです。

      したがって、得られる最終結果は同じで、実行中の単一ページ アプリケーションですが、サーバーから最初の HTML ペイロードを得たので、起動時間が大幅に改善され、完全に SEO インデックス可能なアプリになります。

      構築時にプリレンダリング – Amazon S3 にプリレンダリング アプリをアップロード

      Angular Universal が開く別の可能性は、構築時に頻繁に変更しないコンテンツのプリレンダリングを行うということです。 これは、Grunt、Gulp、または Weppack プラグインのいずれかを使用して可能になります。 Gulp 構成は次のようになり、アプリケーションのコンテンツをファイルにプリレンダリングします。

      そして、Amazon CLI を使用して Amazon S3 バケットにアップロードします。

      ユーザーがすぐにページとやり取りし始めたらどうするか。

      プレーン HTML がレンダリングされてユーザーに表示された瞬間と、クライアント側で Angular が動作して SPA として引き継ぐ瞬間の間には初期タイムラグがあります。 Angular Universal がプリブート機能で可能にするのは、ユーザーがトリガーしているイベントを記録し、Angular が起動したときにそれらを再生することです。

      しかし、これはコードの観点からサーバー上でどのように見えるのでしょうか。

      How to render HTML with Angular in the server

      サーバー上でコンテンツをレンダリングする方法は、Express Angular Universal レンダリング エンジン expressEngine :

      Express の代わりに Hapi を使用したい場合は Hapi エンジンも利用可能です。 また、あらゆる種類のプラットフォーム用のサーバー レンダリング エンジンが登場しています。 C#、Java、PHP など、あらゆるプラットフォーム向けのサーバー レンダリング エンジンも登場します。

      どのように Angular Universal を始めるか。 Angular Universal の主な設計機能の 1 つは、依存性注入を使用する方法です。

      Server Side Rendering Development is not like coding for the client only

      Most of times we want to do our application on the server as the client, by not dependent on browser APIs directly on.

      サーバーサイド レンダリング開発の現実は、それが常に可能とは限らないということであり、クライアントとサーバーで異なることを行いたい場合があります。 サーバー上でそれを呼び出すことはできないので、どのようにレンダリングするのでしょうか。

      別の例として、認証されたページをどのようにレンダリングできるでしょうか。

      Using Dependency Injection to implement Authentication

      認証を処理するために、次のような方法があります。

    • サーバーでは、リクエストをレンダリングするときに、HTTP リクエスト ヘッダーから ID トークンを読み取るようにします。

    クライアントでルーター遷移によりそのページに移動しているときと、サーバーでブラウザーを更新しているときに、同じページ出力を持つにはどうしたらよいでしょうか? たとえば、サーバー上ではログイン メソッドが呼び出される機会はないので、エラーをスローします。

    一方、クライアント上では、Auth0 ロック スクリーン (サードパーティのブラウザ専用ライブラリ) をトリガーして、サインイン フォームを提供しようと考えています。

    次に、サーバーとクライアントで、同じインジェクション トークンに異なるインターフェイスの実装をインジェクションします。

    Getting Started With Angular

    Angular についてもっと学びたい場合は、Angular for Beginners Course をご覧ください:

    Other posts on Angular

    If you enjoyed this post, here some other popular posts on our blog.をご覧ください。

    • Angular Router – How To Build a Navigation Menu with Bootstrap 4 and Nested Routes
    • Angular Router – Extended Guided Tour (英語)。 よくある落とし穴を避ける
    • Angular Components – The Fundamentals
    • How to run Angular in Production Today
    • How to build Angular apps using Observable Data Services – Pitfalls to avoid
    • アンギュラーフォーム入門 – テンプレートドリブン.フォームドリブン, モデル駆動またはその中間
    • Angular ngFor – trackByを含むすべての機能を学ぶ、なぜ配列のためだけではないのですか?
    • Angular Universal In Practice – AngularでSEOに強いシングルページアプリを作る方法
    • How does Angular Change Detection Really Work?

    Leave a Reply