65. SSRとは — 最初のHTMLをサーバで作る

これまで作ってきたAngularアプリは、クライアントサイドレンダリング(CSR)という方式でした。起動の流れのレッスンで見た通り、サーバが返す index.html はほぼ空っぽで、ブラウザがJavaScriptを読み込んで実行して、初めて画面が現れます。この方式の弱点は2つあります。JSの読み込みと実行が終わるまでユーザーには白い画面が見えること、そして検索エンジンやSNSのクローラーがJS実行前の空のHTMLしか読めない場合があることです。

サーバサイドレンダリング(SSR)は、リクエストが来るたびにサーバ側でAngularアプリを実行し、完成したHTMLを返す方式です。ブラウザは受け取った瞬間に中身を表示できるので、初期表示が体感で速くなり、クローラーにも完全な中身が見えます。「同じコンポーネントを、最初の1回だけサーバでも動かす」のがポイントで、アプリの書き方が別物になるわけではありません。

もちろん代償もあります。リクエストごとにサーバでアプリを実行する計算コストがかかり、配信にNode.jsサーバが必要になり、window などブラウザ専用のAPIにサーバ側では触れません。また、内容が固定のページなら、ビルド時にHTMLを作り置きするプリレンダリング(SSG)という軽い選択肢もあります。このレッスンでは仕組みの全体像だけ押さえ、導入の手順は次のレッスンで見ていきます。

サンプルコード(フレームワーク環境が必要なため表示のみ)

<!-- ── CSR: サーバが返すHTML(ほぼ空) ── -->
<body>
  <app-root></app-root>  <!-- JSが実行されるまで中身なし -->
  <script src="main.js"></script>
</body>

<!-- ── SSR: サーバが返すHTML(中身入り) ── -->
<body>
  <app-root>
    <h1>今日の特売</h1>
    <ul><li>りんご 100円</li><li>みかん 80円</li></ul>
  </app-root>  <!-- 届いた瞬間から読める -->
  <script src="main.js"></script>
</body>

サンプルコードで身につける(5本) →

学んだ概念を、素朴な例から実務寄りの例まで5つの具体例で確認します。

公式ドキュメントで詳しく ↗