クライアントサイドジェネレーション（Client-Side Generation, CSG）

定義

クライアントサイドジェネレーションは、ブラウザ内で JavaScript が実行され、動的にコンテンツを生成・表示する方法です。サーバーから基本的な HTML と JavaScript が送られ、その後、ブラウザが API を通じてデータを取得し、ページをレンダリングします。

特徴

• 初回読み込み: サーバーから基本的な HTML と JavaScript のコードを受け取り、その後ブラウザが JavaScript を実行してコンテンツを生成します。
• 動的な更新: ユーザーのアクションに基づいて、クライアント側でコンテンツや UI が動的に更新されます。
• サーバー側の負荷軽減: サーバーは静的なファイルを提供するだけで、コンテンツ生成の負担をクライアント（ブラウザ）に負わせるため、サーバーの負担が軽くなります。
• リッチなインタラクション: ユーザーとアプリケーションのやり取りがスムーズで、動的でインタラクティブなインターフェースを実現します。

例

React や Vue.js、Angular などのモダンな JavaScript フレームワークは、基本的にクライアントサイドでコンテンツを生成する設計です。 これらのフレームワークを使用したウェブアプリケーションは、初回に HTML と JavaScript が読み込まれ、その後に API などからデータを取得して画面を更新します。

利点

• 動的なインタラクション: ユーザーがインタラクションするたびにページがリアルタイムで更新されるので、よりリッチでインタラクティブな体験が可能。
• サーバー負荷の軽減: クライアントがコンテンツを生成するため、サーバー側の負荷が減少します。
• 柔軟なユーザー体験: コンテンツや UI を動的に操作できるため、アプリケーションの動作を自由にカスタマイズ可能。

欠点

• 初回ロードが遅くなることがある: サーバーから JavaScript を読み込む必要があるため、初回のページ読み込み時に遅延が生じることがあります。
• SEO の問題: クライアントサイドでコンテンツを生成するため、検索エンジンがそのコンテンツを正しくインデックスできない場合があります（ただし、サーバーサイドレンダリング（SSR）や静的サイト生成（SSG）で解決できる場合もあります）。