Angular SSRのセットアップ
Angular CLIでSSRを追加します
「Angular SSRのセットアップ」はCoddyKit上の無料Angular Academyレッスンです。 これはレッスン2/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはAngular Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Angular Academyコースには全4レッスンが含まれています。
SSRの追加
SSRを有効にする最も簡単な方法は、ng add @angular/ssr スキーマティックを使うことです。これにより、サーバービルド、Expressベースのサーバー、ハイドレーションが自動的に設定されます。
// terminal
// ng add @angular/ssr新規プロジェクト
新しいアプリを作成するときにSSRフラグを直接指定して、最初からSSR対応のプロジェクトにできます。
// ng new my-app --ssrスキーマティックによる追加内容
server.ts（Expressサーバー）、main.server.ts のブートストラップ、app.config.server.ts を追加し、angular.json にサーバーオプションを設定して、アプリの設定でハイドレーションを有効にします。
provideServerRendering
サーバーアプリケーションの設定では、provideServerRendering() によってSSRエンジンを提供し、ブラウザー用の設定と統合します。
// app.config.server.ts
import { provideServerRendering } from '@angular/ssr';
import { mergeApplicationConfig } from '@angular/core';
const serverConfig = { providers: [provideServerRendering()] };
export const config = mergeApplicationConfig(appConfig, serverConfig);クライアントでのハイドレーション
ブラウザーの設定でハイドレーションを有効にすると、クライアントは再レンダリングせずにサーバーのHTMLを再利用します。これはスキーマティックによって自動的に追加されます。
// app.config.ts
import { provideClientHydration } from '@angular/platform-browser';
export const appConfig = {
providers: [provideClientHydration()]
};Expressサーバー
server.ts は、静的アセットを配信するExpressアプリを作成し、それ以外のすべてのルートのHTMLレンダリングをAngular SSRエンジンに委譲します。
// server.ts (simplified)
const app = express();
app.get('**', (req, res) => {
angularApp.handle(req).then(response =>
response ? writeResponseToNodeResponse(response, res) : res.sendStatus(404)
);
});開発サーバー
開発中は、ng serve がアプリケーションビルダーを使ってSSRを自動的に実行します。そのため、追加の手順なしでサーバーレンダリングされた出力とハイドレーションを確認できます。
// ng serve本番環境向けのビルド
本番ビルドでは、browser バンドルと server バンドルが生成されます。本番環境でSSRを提供するには、Nodeサーバーのエントリーポイントを実行します。
// ng build
// node dist/my-app/server/server.mjsブラウザー専用API
コードはサーバーでも実行されますが、そこには window、document、localStorage が存在しません。このようなアクセスをガードしないと、SSR中にクラッシュします。
import { isPlatformBrowser } from '@angular/common';
import { inject, PLATFORM_ID } from '@angular/core';
const isBrowser = isPlatformBrowser(inject(PLATFORM_ID));
if (isBrowser) { localStorage.setItem('k', 'v'); }HTTPには絶対URLを使用
サーバー上では、相対API URLにオリジンがありません。絶対URLを使用するかベースを設定して、サーバー側の HttpClient 呼び出しが正しく解決されるようにします。
SSRの動作確認
SSRを確認するには、ページにリクエストを送信して、（たとえば curl で）生のレスポンスを調べます。空のアプリルートだけでなく、HTML内にレンダリング済みのコンテンツが含まれているはずです。
// curl http://localhost:4000/ | grep "<h1>"理解度チェック
SSRの設定に関する知識を確認します。
まとめ
ng add @angular/ssr を使ってSSRを設定しました。Expressサーバー、provideServerRendering()、クライアントハイドレーションが追加されます。ブラウザー専用APIをガードし、サーバー側では絶対URLを使用し、生のレスポンスでレンダリング済みHTMLを確認することを忘れないでください。
よくある質問
「Angular SSRのセットアップ」レッスンは無料ですか？
はい。「Angular SSRのセットアップ」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Angular Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Angular Academyコースには全4レッスンが含まれています。
「Angular SSRのセットアップ」で何を学びますか？
Angular CLIでSSRを追加します ブラウザで直接実行するハンズオンコードでAngular Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
Angular Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのAngular Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン2/4です。
「Angular SSRのセットアップ」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このAngular Academyレッスンでコードを書いて実行できますか？
はい。すべてのAngular Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- サーバーサイドレンダリングの理由
- Angular SSRのセットアップ
- サーバールートとレンダリングモード
- クライアントへの状態転送