サーバールートとレンダリングモード
ルートごとにプリレンダリング、SSR、CSRを設定します
「サーバールートとレンダリングモード」はCoddyKit上の無料Angular Academyレッスンです。 これはレッスン3/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはAngular Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Angular Academyコースには全4レッスンが含まれています。
すべてに同じ方式が適するわけではない
すべてのルートを同じ方法でレンダリングする必要はありません。Angular SSRでは、ルートごとにレンダリングモードを割り当てられます。サーバーレンダリング、クライアントレンダリング、ビルド時のプリレンダリングから選択できます。
3つのモード
RenderMode.Server はリクエストごとにレンダリングし、RenderMode.Client はブラウザー内でのみレンダリングし（CSR）、RenderMode.Prerender はビルド時に静的HTMLを生成します（SSG）。
サーバールートの設定
ServerRoute[] でパスとレンダリングモードの対応を定義し、サーバー設定で provideServerRouting を使って提供します。
import { RenderMode, ServerRoute } from '@angular/ssr';
export const serverRoutes: ServerRoute[] = [
{ path: '', renderMode: RenderMode.Prerender },
{ path: 'dashboard', renderMode: RenderMode.Client },
{ path: '**', renderMode: RenderMode.Server }
];接続設定
サーバーアプリケーションの設定にルートを登録し、SSRエンジンが各パスを処理する方法を認識できるようにします。
// app.config.server.ts
import { provideServerRouting } from '@angular/ssr';
providers: [
provideServerRendering(),
provideServerRouting(serverRoutes)
]プリレンダリングを使う場面
ホーム、会社概要、ドキュメントなど、安定した公開ページには Prerender を選択します。これらは一度HTMLにビルドされ、リクエストごとのサーバーコストなしでCDNから即座に配信できます。
Serverを使う場面
商品の在庫がリアルタイムで変わる商品ページのように、リクエストやユーザーごとに内容が変わり、なおかつSEOや初回表示の速さが必要なページには Server を選択します。
Clientを使う場面
認証済みダッシュボードのように、インタラクションが多く非公開で、SEOや初回表示があまり重要でないページには Client を選択します。サーバーはシェルを送信し、ブラウザーがレンダリングします。
動的パラメーターのプリレンダリング
パラメーター付きルートでは、getPrerenderParams を使って生成するパラメーターのリストを返し、プリレンダラーに指定する必要があります。
{
path: 'product/:id',
renderMode: RenderMode.Prerender,
async getPrerenderParams() {
const ids = await fetchProductIds();
return ids.map(id => ({ id }));
}
}プリレンダリングのフォールバック
プリレンダリングされていないパラメーターは、実行時にサーバーまたはクライアントレンダリングへフォールバックできます。そのため、人気のある項目をプリレンダリングし、残りの項目は必要に応じてレンダリングできます。
ルートごとのヘッダーとステータス
サーバールートではレスポンスヘッダーとステータスコードを設定できます。キャッシュポリシーの設定や、見つからないルートハンドラーから404を返す場合に便利です。
{
path: 'old-page',
renderMode: RenderMode.Server,
headers: { 'Cache-Control': 'no-store' }
}モードの戦略的な組み合わせ
実際のアプリではモードを組み合わせます。マーケティングページはプリレンダリングし、SEOが重要な動的ページはサーバーレンダリングし、ログイン後のアプリはクライアントレンダリングします。これにより、コストとパフォーマンスを同時に最適化できます。
理解度チェック
レンダリングモードに関する知識を確認します。
まとめ
ServerRoute[] と provideServerRouting を使ってルートごとのレンダリングを設定しました。安定した公開ページには Prerender、動的でSEOが重要なページには Server、非公開でインタラクティブなページには Client を使用します。動的ルートではプリレンダリングするパラメーターも指定できます。
よくある質問
「サーバールートとレンダリングモード」レッスンは無料ですか？
はい。「サーバールートとレンダリングモード」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Angular Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Angular Academyコースには全4レッスンが含まれています。
「サーバールートとレンダリングモード」で何を学びますか？
ルートごとにプリレンダリング、SSR、CSRを設定します ブラウザで直接実行するハンズオンコードでAngular Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
Angular Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのAngular Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン3/4です。
「サーバールートとレンダリングモード」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このAngular Academyレッスンでコードを書いて実行できますか？
はい。すべてのAngular Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- サーバーサイドレンダリングの理由
- Angular SSRのセットアップ
- サーバールートとレンダリングモード
- クライアントへの状態転送