静的サイトと動的サイトの違い | 仕組み解説

まず結論

静的サイトは、あらかじめ作られたHTMLを配信するサイトです。動的サイトは、リクエストに応じてサーバがHTMLやデータを作るサイトです。

どちらが上という話ではありません。作りたいものによって向き不向きがあります。

静的サイトでは、公開前にHTML、CSS、JavaScriptなどを生成します。

build
  -> index.html
  -> about/index.html
  -> assets/style.css

ユーザーがアクセスすると、サーバやCDNは既にあるファイルを返します。

向いているもの:

Astroや静的出力のNext.js、Hugoなどは静的サイト構築で使われます。

動的サイトでは、アクセス時にサーバが処理してHTMLやデータを返します。

例:

サーバは、DBを読んだり、認証を確認したり、リクエスト内容に応じてレスポンスを変えたりします。

種類	いつHTMLを作るか
静的サイト	ビルド時
動的サイト	リクエスト時

静的サイトは事前に作るため、配信が速く、構成がシンプルになりやすいです。

動的サイトはリクエストごとに処理できるため、ユーザーごとの表示やリアルタイムなデータに向いています。

静的サイトでも、フォームやAPI連携はできます。

たとえば:

つまり、静的サイトだから何も動かせないわけではありません。HTML配信は静的、問い合わせ処理は別APIという構成もあります。

小さく始めるなら、静的サイトで十分なことが多いです。ログイン、DB更新、ユーザーごとの表示が必要になったら動的処理を検討します。

ポイント: 「サイト全体が静的か動的か」ではなく、「どの部分に動的処理が必要か」で考えます。

静的サイトは、事前に生成したファイルを配信する構成です。動的サイトは、アクセス時にサーバが処理して内容を返す構成です。

ブログや会社サイトは静的サイトと相性がよく、ログインやDB更新が中心なら動的サイトが必要になります。