66. @angular/ssr — ng add で始めるサーバサイドレンダリング

AngularでSSRを始めるのは、ng add @angular/ssr の1コマンドです。実行すると、Node.js(Express)のサーバ本体である server.ts、サーバ側の起動口となる main.server.ts などが追加され、ビルドが「ブラウザ用」と「サーバ用」の二段構えに変わります。ng new のときに --ssr を付けて、最初からSSR込みで作ることもできます。

導入後の大事な設計ポイントが、ルートごとのレンダリング方法の宣言です。app.routes.server.ts に、このルートはリクエストごとにサーバで描画(RenderMode.Server)、このルートはビルド時に作り置き(RenderMode.Prerender)、ここは従来通りブラウザで描画(RenderMode.Client)、と割り当てます。会社概要のような固定ページは Prerender、ログイン後のダッシュボードは Client、商品詳細のような動的で共有されるページは Server、という使い分けが典型です。

気をつけるのは、サーバでは動かないコードの扱いです。window や localStorage はブラウザにしか存在しないので、サーバ実行中に触るとエラーになります。ブラウザでの描画後にだけ実行したい処理は afterNextRender() の中に書くのが基本形です。「このコードはサーバでも動くか?」という視点が、SSR導入後の新しい習慣になります。