静的サイト生成（SSG）とサーバーサイドレンダリング（SSR）
はじめに
ウェブサイトやウェブアプリケーションを構築する際に、ページのロード時間や SEO（検索エンジン最適化）を改善するために、静的サイト生成（SSG）とサーバーサイドレンダリング（SSR）が用いられます。このセクションでは、Astro での SSG と SSR の違い、それぞれの利点、および具体的な実装方法について説明します。
静的サイト生成（SSG）
SSG は、ビルド時にウェブサイトの各ページを静的な HTML ファイルとして生成する手法です。これにより、サーバーはリクエストごとに HTML を生成する必要がなく、リクエストがあったときにはすぐに静的ファイルを提供できるため、ページのロード時間が短縮されます。
例: Astro での SSG
Astro では、デフォルトで SSG が有効になっています。src/pagesディレクトリ内に.astroまたはサポートされている他のフレームワーク（React、Vue など）のコンポーネントファイルを作成すると、ビルド時に静的な HTML が生成されます。
src/pages/index.astroの例
---
// ページ固有のロジックをここに記述
---
<html>
<head>
<title>My Astro Website</title>
</head>
<body>
<h1>Welcome to My Astro Website</h1>
</body>
</html>
このファイルはビルド時に静的な HTML ページとして生成され、クライアントに高速に提供されます。
サーバーサイドレンダリング（SSR）
SSR は、クライアントからの各リクエストに対してサーバーで HTML をリアルタイムに生成し、送信する手法です。この方法は、ユーザーまたはセッションごとにカスタマイズされたコンテンツが必要な場合や、常に最新のデータを表示する必要がある場合に適しています。
例: Astro での SSR の実現方法
Astro はデフォルトで SSG を使用しますが、API データに基づいてページの内容を動的に生成する必要がある場合など、SSR が必要なシナリオもあります。現在の Astro バージョンでは、直接的な SSR サポートは限定的ですが、クライアントサイドでデータをフェッチしてレンダリングする方法で動的なレンダリングのニーズを満たすことができます。
API データをフェッチして表示するコンポーネントの例（クライアントサイドレンダリング）
import React, { useEffect, useState } from 'react';
function UserProfile() {
const [user, setUser] = useState(null);
useEffect(() => {
fetch('/api/user')
.then((response) => response.json())
.then((data) => setUser(data));
}, []);
if (!user) {
return <div>Loading...</div>;
}
return (
<div>
<h1>{user.name}</h1>
<p>{user.bio}</p>
</div>
);
}
export default UserProfile;
この React コンポーネントは、クライアントサイドで API からユーザープロフィールデータをフェッチし、レンダリングします。Astro プロジェクトでclient:loadディレクティブを使用してこのコンポーネントを読み込むことで、動的なコンテンツの生成が可能になります。