サーバーサイドレンダリングの機能制限
サーバーサイドレンダリングで生成されたWebページでは、Angularの全機能が利用できるわけではありません。この機能制限について説明していきます。
サンプルの説明
説明で利用するサンプルを図6に示します。
このサンプルは、Web APIから取得したデータ（ここではスマートフォンのリスト）を一覧画面に表示します。リストされたデータのリンク、または「新規追加」リンクをクリックすると詳細画面に遷移します。
詳細画面ではデータの登録／編集／削除を行います。テキストボックスの内容は、双方向データバインディングでタイトルに反映されます。「保存」「削除」ボタンをクリックすると、それぞれの処理を実行後、一覧画面に戻ります。「戻る」リンクをクリックすると、何もせずに一覧画面に戻ります。一覧画面と詳細画面のリンクは、ルーター機能のリンク（routerLink）で記述されています。実装の詳細はサンプルコードのREADMEファイルを参照してください。
サンプルをサーバーサイドレンダリング対応する手順
リスト1のコマンドで、「--clientProject」オプションにプロジェクト名「p002-router」を指定して実行すれば、サーバーサイドレンダリングに対応できます。
ただし、サーバーサイドレンダリングでは、Web APIにアクセスするURLは絶対パスである必要があります。図6のサンプルでは、APIにアクセスするApiClientServiceサービスのコンストラクターで、リスト8の通り実装して、APIのURLを絶対パスにします。
apiUrl = 'api/phones'; // APIのURL
// コンストラクター
constructor(
private http: HttpClient,
@Optional() @Inject(APP_BASE_HREF) origin: string) { // オリジン取得...（1）
if (origin !== null) {
this.apiUrl = origin + this.apiUrl; // APIのURLを絶対パスにする
}
}
（1）で、絶対パスのオリジン（ホスト名とポート番号）を含む変数originを依存性注入で取得します。@Optional()はoriginがnullになりうることを表す指定です。また、@Inject(APP_BASE_HREF)は、APP_BASE_HREFという名前（DIトークン）で提供されているオリジンの値を受け取る指定です。
オリジンの値はserver.tsのプロバイダーに、リスト9の通り設定します。オリジンの値は環境により変わりますが、ここではローカルでの実行を想定した値にしています。
providers: [
{ provide: APP_BASE_HREF, useValue: 'http://localhost:4000/' }
],
サーバーサイドレンダリングの機能制限
ここまでの手順でサーバーサイドレンダリングに対応させたサンプル（p002-router-ssr）を実行して、JavaScriptを無効にしたWebブラウザーで開くと、図6と同一のページが表示され、以下の操作が問題なく実行できます。
- 一覧画面のリストからリンクをクリックして詳細画面に遷移する
- 一覧画面の「新規作成」リンクをクリックして詳細画面に遷移する
- 詳細画面の「戻る」リンクで一覧画面に遷移する
一方で、詳細画面では以下の問題が発生します。
- 「名前を編集」のテキストボックスを編集しても、内容がタイトルに反映されない
- 「保存」「削除」ボタンを押しても何も起きない
これは、サーバーサイドレンダリングされたページでは、ルーター機能のリンク（routerLink）によるページ遷移以外の動作は機能しないためです。サーバーサイドレンダリングを利用する場合、この制限を考慮に入れておく必要があります。
JavaScriptが有効なWebブラウザーでは、サーバーサイドレンダリングされたページの表示後、JavaScriptがダウンロードされて実行されると、通常のAngularのページに切り替わって、全機能が利用できるようになります。
［補足］Chromeの開発者ツールで通信速度が遅い環境を作る
開発環境では、ダウンロード／実行の時間が非常に短いため、サーバーサイドレンダリングのページから通常のAngularのページへの切り替えがわかりにくいです。F12キーで起動できるChromeの開発者ツールを利用すると、疑似的に通信速度が遅い環境を作成して動作を検証できます。
図7で通信速度を「Slow 3G」（3G携帯電話の遅い通信速度）に設定して、p002-router-ssrサンプルの一覧画面を表示させると、ページの表示後もJavaScriptのダウンロードが続き、完了後にページが再描画される（一覧画面のリストが一瞬リセットされて再取得される）様子が確認できます。
まとめ
本記事では、Angularのサーバーサイドレンダリング機能について説明しました。サーバーサイドでWebページを生成するため、検索エンジンのクローラーが正しくページ内容を取得でき、SEO対策に有効です。また、端末の処理速度や通信速度が遅い環境でも、最低限のページ内容を先に表示させることができます。
次回は、Angularのディレクティブに着目して、自作ディレクティブを実装する方法を解説していきます。
