Angular SSR（Universal）は何を提供しますか？

Question

Accepted Answer

**Angular SSR**（歴史的にはAngular Universalと呼ばれていた）は、初期リクエストに対してブラウザが JavaScript で埋める必要がある空のページを送信する代わりに、サーバー上でアプリの HTML を**レンダリング**します。これにより SEO、認識されるパフォーマンス、および最初のペイントが向上します。 ## SSR が解決する問題 ```text Client-side rendering (default SPA): Server sends empty + JS bundle → browser downloads & runs Angular → THEN content appears → slow first paint; crawlers/social bots may see a blank page Server-side rendering: Server runs Angular, sends fully-rendered HTML → content visible immediately → Angular "hydrates" it for interactivity ``` SSR を使用すると、サーバーが完全な HTML を生成するため、ユーザーと検索エンジンはすぐに実際のコンテンツを取得します。その後、Angular はイベントリスナーを付加（ハイドレーション）してインタラクティブにします。 ## セットアップ ```bash ng add @angular/ssr # adds server rendering to an existing app ``` これにより、サーバー上で Angular をレンダリングしプリレンダリングされた HTML を提供する Node/Express サーバーがスカフォルドされます。 ## SSR が提供するもの ```text ✓ Better SEO — crawlers get full content (critical for content/marketing sites) ✓ Faster First Contentful Paint — visible content before JS loads ✓ Better social sharing — link previews see real meta tags/content ✓ Improved performance on slow devices/networks ``` ## ハイドレーション — 再レンダリングを回避する ```ts provideClientHydration() // non-destructive hydration: reuse server HTML, don't rebuild ``` モダン Angular の**非破壊的ハイドレーション**は、サーバーでレンダリングされた DOM を再度レンダリングして破棄する代わりに再利用します — フリッカーを回避しパフォーマンスを向上させます。 ## 関連：SSG（プリレンダリング） ```text SSR → render per request (dynamic content, always fresh) SSG → prerender pages at BUILD time (static, fastest) — good for content that rarely changes ``` Angular はビルド時に静的コンテンツの最速配信のためのルートの**プリレンダリング**（SSG）もサポートしています。 ## 注意事項 ```text ⚠️ No browser APIs on the server (window, document, localStorage) — guard with isPlatformBrowser ⚠️ More infrastructure (a Node server to run/maintain) ``` ## なぜ重要なのかコンテンツが豊富なサイト、e コマース、または **SEO と高速初期ペイント**が重要なアプリの場合、クライアントのみの Angular SPA は不十分です — 検索エンジンとユーザーは JS が実行されるまで空白のページを取得します。 SSR（ハイドレーションを使用）はすぐに実際の HTML を配信することでこれを解決し、SSG は静的コンテンツに対してさらに先に進みます。 SSR が追加の複雑さに見合う価値があるかを知ること — およびブラウザ API の注意事項 — がアーキテクチャの重要な判断です。