SSR/SSG

SSR/SSG とは

SSR (Server-Side Rendering) と SSG (Static Site Generation) は、Web ページの HTML をいつ、どこで生成するかを制御するレンダリング戦略である。SPA (Client-Side Rendering) の SEO とパフォーマンスの課題を解決する。

4 つのレンダリング戦略

4 つのレンダリング戦略を以下にまとめる。

戦略	HTML 生成タイミング	用途
CSR (Client-Side)	ブラウザで実行時	インタラクティブな SPA
SSR (Server-Side)	リクエスト時にサーバーで	ダッシュボード、検索結果
SSG (Static Site)	ビルド時に事前生成	ブログ、ドキュメント、LP
ISR (Incremental Static)	バックグラウンドで再生成	EC サイト、ニュース

SSR (Server-Side Rendering)

SSR (Server-Side Rendering) のコード例を示す。

// Next.js App Router: Server Component (デフォルトで SSR)
async function ProductPage({ params }: { params: { id: string } }) {
  const product = await db.products.findById(params.id); // サーバーで実行
  return <div><h1>{product.name}</h1><p>{product.description}</p></div>;
}

リクエストのたびにサーバーで HTML を生成する。常に最新のデータを表示できるが、サーバーの処理時間がレスポンスに加算される。

SSG (Static Site Generation)

SSG (Static Site Generation) のコード例を示す。

// Next.js: ビルド時に HTML を生成
export async function generateStaticParams() {
  const posts = await db.posts.findMany();
  return posts.map(post => ({ slug: post.slug }));
}

async function BlogPost({ params }: { params: { slug: string } }) {
  const post = await db.posts.findBySlug(params.slug);
  return <article><h1>{post.title}</h1><div>{post.content}</div></article>;
}

ビルド時に全ページの HTML を生成し、S3 + CloudFront で配信する。サーバーが不要で最も高速だが、データの更新にはリビルドが必要。

ISR (Incremental Static Regeneration)

ISR (Incremental Static Regeneration) のコード例を示す。

// Next.js: 60秒ごとにバックグラウンドで再生成
export const revalidate = 60;

async function ProductPage({ params }) {
  const product = await db.products.findById(params.id);
  return <div>{product.name}: ¥{product.price}</div>;
}

SSG の速度と SSR の鮮度を両立する。キャッシュされた HTML を即座に返しつつ、バックグラウンドで最新データで再生成する。

選択基準

選択の指針を以下にまとめる。

ケース	推奨戦略
ブログ、ドキュメント	SSG (S3 + CloudFront)
EC サイト (商品ページ)	ISR (60 秒ごとに再生成)
ダッシュボード	SSR (常に最新データ)
管理画面	CSR (SEO 不要)

AWS でのホスティング

AWS でのホスティングを以下にまとめる。

戦略	ホスティング
SSG	S3 + CloudFront (最安)
SSR	Lambda@Edge, Amplify Hosting, ECS
ISR	Amplify Hosting, ECS
CSR	S3 + CloudFront

SSR/SSG については関連書籍でも詳しく扱われている。