開発者ドキュメント

サーバーサイドレンダリングにAngularUniversalを使用する方法

序章

シングルページアプリケーション(SPA)は、最初にクライアントに提供されるシングルHTMLドキュメントで構成されます。 アプリで必要な新しいビューは、JavaScriptを介してクライアント上でのみ生成されます。 要求と応答のサイクルは引き続き発生しますが、これは通常、データ用のRESTfulAPIに対してのみ行われます。 または、画像などの静的リソースを取得します。

この方法でアプリケーションを作成することには多くの利点があります。 ただし、Webクローラーがアプリをトラバースする機能や、アプリの読み込み中にパフォーマンスが低下するなど、失うものがいくつかあります。これにはかなりの時間がかかる場合があります。 ギャップを埋めるためにサーバーサイドレンダリング(SSR)が登場します。

この記事では、サーバーサイドレンダリングにAngularUniversalを使用する方法を学習します。

前提条件

このチュートリアルに従うには、次のものが必要です。

このチュートリアルは、ノードv16.4.2、npm v7.19.1、@angular/core v12.1.1、および@nguniversal/express-enginev12.1.0で検証されました。

ステップ1—AngularUniversal入門

Angularアプリケーションはシングルページアプリであり、クライアントのブラウザーで実行されます。 ただし、Angular Universalを使用すると、サーバー上でAngularアプリを実行することもできます。 これにより、静的HTMLをクライアントに提供できます。 Angular Universalを使用すると、サーバーはページを事前にレンダリングしてユーザーに何かを表示し、クライアント側のアプリはバックグラウンドで読み込まれます。 次に、すべてがクライアント側で準備が整うと、サーバーでレンダリングされたページの表示からクライアント側のアプリにシームレスに切り替わります。 ユーザーは、「読み込み中」のスピナーが終了するのを待つ代わりに、フル機能のクライアント側アプリケーションの使用を開始できるようになるまで、少なくともユーザーの関心を維持するためのコンテンツを用意できるという事実以外に、違いに気付かないはずです。

Angular Universalを使用するSSRを機能させるには、クライアントアプリケーションとサーバースタックの両方を変更する必要があります。 この記事では、これがバージョン> =7のAngularCLIでほとんど作成されていないまったく新しいAngularアプリケーションであると想定します。 ほぼすべてのサーバーテクノロジーでユニバーサルアプリを実行できますが、それ自体がノードパッケージであるAngularUniversalによって提供される特別な関数renderModuleFactory()を呼び出すことができる必要があります。 したがって、Node / ExpressサーバーからこのAngularアプリケーションを提供することは、この例では理にかなっています。

回路図を使用して、すばやく立ち上げます。

アプリディレクトリからターミナルを開き、次のコマンドを実行します。

  1. ng add @nguniversal/express-engine

この回路図がアプリにいくつかの変更を加え、いくつかのファイルを変更し、いくつかのファイルを追加したことに気付くでしょう。

更新angular.json

これにより、AngularCLIはサーバー/ユニバーサルバージョンのAngularアプリケーションについて知ることができます。

更新package.json

いくつかの新しい依存関係(予想される)に加えて、いくつかの新しいスクリプトも取得します。

更新main.ts

これは、ユニバーサルレンダリングされたページが完全に読み込まれるまで、アプリのブラウザーバージョンがブートストラップを開始しないように変更されました。

更新app.module.ts

インポートされたBrowserModuleで静的メソッド.withServerTransitionを実行するように変更されました。 これは、クライアントがサーバーバージョンからある時点で移行することをアプリケーションのブラウザバージョンに通知します。

server.tsを作成します

これはNodeJSExpressサーバーです。 明らかに、次の行に注意してくださいが、生成されたとおりにこの正確なサーバー設定を使用する必要はありません。

server.engine('html', ngExpressEngine({ ... }))

ngExpressEngineは、ユニバーサルを機能させるrenderModuleFactoryのラッパーです。 この正確なserver.tsファイルをセットアップに使用しない場合は、少なくともこの部分をコピーして、自分のファイルに統合してください。

tsconfig.server.jsonを作成します

これは、ユニバーサルアプリケーションのエントリモジュールを見つける場所をAngularコンパイラに指示します。

app.server.module.tsを作成します

これは、サーバーバージョンのみのルートモジュールです。 AppModuleと、@angular/platform-serverからServerModuleをインポートし、AppModuleと同じAppComponentをブートストラップしていることがわかります。 AppServerModuleは、ユニバーサルアプリケーションのエントリポイントです。

main.server.tsを作成します

この新しいファイルは基本的に、アプリケーションのユニバーサルバージョンのエントリポイントであるAppServerModuleのみをエクスポートします。 これについてはすぐに再検討します。

ステップ2—ユニバーサルアプリを起動する

コマンドラインから、次のコマンドを実行します。

  1. npm run build:ssr

そして、実行します:

  1. npm run serve:ssr

ビルドプロセス中に問題が発生しなかった場合は、ブラウザーを開いてhttp://localhost:4000(または構成されているポート)を開くと、ユニバーサルアプリが動作していることがわかります。 見た目は変わりませんが、最初のページは通常のAngularアプリケーションよりもはるかに高速に読み込まれるはずです。 アプリが小さくてシンプルな場合、これは気づきにくいかもしれません。

Chrome開発ツールを開き、[ネットワーク]タブで、オンラインというドロップダウンを見つけて、ネットワーク速度を調整してみてください。 Slow 3G を選択して、低速ネットワーク上のデバイスを模倣します。ランディングページ、およびアクセスするルーティングされたページのパフォーマンスは引き続き良好です。

また、ページソースを表示してみてください(ページを右クリックして、ページソースの表示を選択します)。 <body>タグには、ページに表示されているものと一致するすべての通常のHTMLが表示されます。つまり、アプリケーションはWebクローラーによって意味のある形でスクレイピングされる可能性があります。 これを非ユニバーサルアプリケーションのページソースと比較すると、<body>タグに表示されるのは<app-root>(またはブートストラップされたAppComponent)。

結論

この記事では、サーバーサイドレンダリングにAngularUniversalを使用する方法を学びました。

ユニバーサルアプリケーションはブラウザではなくサーバー上で実行されるため、アプリケーションコードで注意する必要があることがいくつかあります。

公式ドキュメントでAngularUniversalが提供するものについて引き続き学習してください。

モバイルバージョンを終了