まず結論
静的サイトは、あらかじめ作られたHTMLを配信するサイトです。動的サイトは、リクエストに応じてサーバがHTMLやデータを作るサイトです。
どちらが上という話ではありません。作りたいものによって向き不向きがあります。
この記事は静的・動的という用語を説明します。SSG・SSR・ISR・CSRの方式比較はSSG・SSR・ISR・CSRの違い、SSRの採用判断はSSRが必要になるページ、不要なページを参照してください。
静的サイト
静的サイトでは、公開前にHTML、CSS、JavaScriptなどを生成します。
build
-> index.html
-> about/index.html
-> assets/style.css
ユーザーがアクセスすると、サーバやCDNは既にあるファイルを返します。
向いているもの:
- コーポレートサイト
- ブログ
- ドキュメント
- ランディングページ
- 更新頻度が低めの情報サイト
Astroや静的出力のNext.js、Hugoなどは静的サイト構築で使われます。
動的サイト
動的サイトでは、アクセス時にサーバが処理してHTMLやデータを返します。
例:
- ログイン後のマイページ
- ECサイトのカート
- 管理画面
- 検索結果
- ユーザーごとに変わる画面
サーバは、DBを読んだり、認証を確認したり、リクエスト内容に応じてレスポンスを変えたりします。
生成タイミングの違い
| 種類 | いつHTMLを作るか |
|---|---|
| 静的サイト | ビルド時 |
| 動的サイト | リクエスト時 |
静的サイトは事前に作るため、配信が速く、構成がシンプルになりやすいです。
動的サイトはリクエストごとに処理できるため、ユーザーごとの表示やリアルタイムなデータに向いています。
フォームやAPIはどうなるか
静的サイトでも、フォームやAPI連携はできます。
たとえば:
- 外部フォームサービスを使う
- サーバレス関数を使う
- APIだけ別サーバにする
- 静的ページからJavaScriptでAPIを呼ぶ
つまり、静的サイトだから何も動かせないわけではありません。HTML配信は静的、問い合わせ処理は別APIという構成もあります。
選び方
| 要件 | 向いている構成 |
|---|---|
| 会社紹介 | 静的サイト |
| 技術ブログ | 静的サイト |
| 会員マイページ | 動的サイト |
| 管理画面 | 動的サイト |
| 問い合わせフォーム | 静的 + 外部サービス/API |
| 検索機能 | 静的 + クライアント検索、または動的 |
小さく始めるなら、静的サイトで十分なことが多いです。ログイン、DB更新、ユーザーごとの表示が必要になったら動的処理を検討します。
ポイント: 「サイト全体が静的か動的か」ではなく、「どの部分に動的処理が必要か」で考えます。
静的・動的はサイト全体のラベルではない
静的とは「利用者が操作できない」という意味ではなく、要求ごとにサーバがHTMLを組み立てなくても配れることです。静的HTMLでもJavaScriptから検索APIを呼び、フォームを外部サービスへ送れます。動的サイトも、ロゴやCSS、ヘルプ記事は静的ファイルとしてCDNから配れます。分類する対象をサイト全体ではなく、HTML生成、データ取得、利用者操作の境界に分けます。
| 機能 | HTMLの候補 | 動的処理 |
|---|---|---|
| 学校紹介 | 静的生成 | なし |
| お知らせ一覧 | 静的生成または再生成 | CMS更新 |
| 資料請求 | 静的生成 | 送信API、迷惑送信対策 |
| ログイン | 静的な画面骨格 | 認証API |
| 学習進捗 | 静的な画面骨格 | 利用者別取得・更新 |
| 管理画面 | 動的生成またはCSR | 認可、DB操作、監査 |
選定で見る運用上の差
静的ファイルはCDNへ置きやすく、配信時にDB障害の影響を受けにくい一方、更新にはビルドと配布が必要です。記事が十万件あれば全件再生成の時間を考えます。動的生成は公開直後の情報や個別化を返せますが、アクセス増加時の計算資源、DB接続、キャッシュ無効化、障害時の縮退が必要です。
フォームがあるからサイト全体を動的にする必要はありません。公開ページを静的に保ち、POST先だけをサーバレス関数やAPIにできます。ただしAPI側では入力検証、CSRFの要否、レート制限、保存失敗時の再送を設計します。見た目が静的でも、個人情報を扱う送信処理は動的な責任を持ちます。
よくある誤解
「静的なら更新できない」は誤りで、再ビルドすれば更新できます。「動的なら必ずリアルタイム」でもなく、キャッシュや同期遅延があります。「静的なら安全」でもありません。公開ファイルへ秘密鍵を埋め込めば誰でも取得でき、クライアントJavaScriptの環境変数も閲覧できます。配信方式にかかわらず、秘密情報と認可判断は信頼できるサーバ側へ置きます。
動作確認：配信経路と更新経路を追う
Document応答のHTML、追加API通信、キャッシュヘッダーを確認します。CMSを更新してから公開へ反映されるまでを測り、ビルド失敗時に以前の版が残るか試します。動的ページではDB停止、未認証、権限違い、アクセス集中時の応答を確認します。
静的フォームではJavaScript無効時の案内、二重送信、API障害、秘密値が生成物へ含まれないことを検査します。「静的か動的か」は見た目ではなく、要求ごとに実行される処理と更新の反映方法を観測して判断します。
まとめ
静的サイトは、事前に生成したファイルを配信する構成です。動的サイトは、アクセス時にサーバが処理して内容を返す構成です。
ブログや会社サイトは静的サイトと相性がよく、ログインやDB更新が中心なら動的サイトが必要になります。
