レンダリングとは、エンドユーザーがブラウザを介して操作できるページの作成に必要なコードを作成するプロセスを指します。これには、コンテンツの準備、ロジックと処理の適用、および最終ページを表示するために必要な UI 要素やその他の必須コンポーネントを組み込むことが含まれます。コンテンツ ドリブン型アプリは、高速読み込み、低レイテンシ、高速なレンダリングに重点を置いています。
サーバーサイド レンダリング（SSR）
サーバー側レンダリング（SSR）では、サーバーでウェブページをレンダリングし、JavaScript を使用してクライアント側でレンダリングするのではなく、完全にレンダリングされた HTML をクライアントのブラウザに送信します。ユーザーがアプリケーションにアクセスすると、ブラウザからサーバーにリクエストを送信します。アプリケーションはサーバーでリクエストを処理し（データベースや外部 API からのデータの収集を含む）、リクエストされたページの HTML をレンダリングします。その後、サーバーは完全にレンダリングされたページの HTML をユーザーのブラウザに返します。ユーザーのブラウザで HTML を受信すると、必要な JavaScript ファイルがすべて読み込まれます。
SSR を使用するメリットは、初期読み込み速度の向上、検索エンジン最適化（SEO）のパフォーマンス、信頼性、全体的なユーザー エクスペリエンスの向上などです。ただし、SSR は、パフォーマンスのオーバーヘッドや、SSR 対応アプリケーションの構築と維持に必要な開発スキルのために、クライアント側のレンダリング（CSR）よりも実装が複雑になる場合があります。SSR は、コンテンツ主導のウェブ アプリケーション、e コマース プラットフォームなど、優れた SEO パフォーマンスと高速な初期レスポンス速度を必要とするアプリケーションに特に役立ちます。
静的サイト生成（SSG）
静的サイト生成（SSG）は、ビルド時に静的 HTML ファイルを生成し、サーバー側またはクライアント側でレンダリングせずにユーザーに配信する機能です。ウェブ コンテンツは、通常はマークダウン、JSON、YAML などの構造化形式で作成され、テキスト、画像、その他のアセットが含まれます。 Hugo や Jekyll などの静的サイト生成ツールでコンテンツを処理し、HTML、CSS、JavaScript ファイルを生成します。静的出力はウェブサイト全体であり、これらの静的ファイルはウェブサーバー、CDN、またはホスティング サービスにデプロイされます。
CSS と HTML について詳しくは、web.dev をご覧ください。
ファイルは静的であるため、キャッシュに保存でき、すばやく読み込むことができます。SSG は、頻繁に変更されないウェブ アプリケーションや、定期的なサイトビルドで更新されるウェブ アプリケーションに適しています。動的なインタラクティビティを使用するウェブ アプリケーションには適していません。
クライアントサイド レンダリング（CSR）
クライアントサイド レンダリング（CSR）は、サーバーではなくクライアントのブラウザで行われます。 多くの場合、ウェブ アプリケーションは最小限の HTML テンプレートで読み込まれます。コンテンツは JavaScript と、サーバーまたは API からのデータを使用して動的に操作されます。アプリケーション リクエストの後、サーバーは、ページのレンダリングに必要な基本構造と JavaScript コードを含む最小限の HTML ドキュメントを送信します。JavaScript コードはユーザーのブラウザで実行されます。その後、コードは取得したデータを処理し、CSS、HTML、すべてのインタラクティブな要素を含むコンテンツを生成します。JavaScript コードは、フォームの送信などのユーザー操作に応答します。
CSR の利点は、迅速なページ遷移とレスポンシブなインターフェースです。 CSR ベースのウェブ アプリケーションは、SSR に比べて初期読み込みに時間がかかることが多く、SEO 上の課題があります。CSR アプリケーションが大きくなるにつれ、開発と保守が非常に複雑になる可能性があります。