---
title: Jamstackと一般的なWebサイトの違い
description: 一般的なWebサイトとJamstackサイトの大きく異なる点は、WebブラウザがWebサイトを訪問してから表示されるまでの流れにあります。Jamstackと一般的なWebサイトの相違点について解説します。
---

ここではJamstackと一般的なWebサイトの相違点について解説します。

## 一般的なWebサイトとは

ここで挙げる一般的なWebサイトとは、最小構成として次のようなサーバー構成で実装されるWebサイトです。PHPなどHTTPサーバーとアプリケーションサーバーが一体化している場合もあります。

- **Web（HTTP）サーバー**  
Webブラウザからのリクエストを受け取り、アプリケーションサーバーを呼び出します。その結果としてHTMLを受け取り、Webブラウザに返却します。静的コンテンツを保持しそのままHTMLや画像などを返却する場合もあります。
- **アプリケーションサーバー**  
Webサーバーからデータを受け取り、データベースサーバーと情報をやり取りします。その結果としてHTMLを生成し、Webサーバーに返却します。
- **データベースサーバー**  
ユーザー、商品、コンテンツなどの情報を格納したデータベースです。アプリケーションサーバーから呼び出され、データを返却します。

Web APIを活用したWebサイトが登場する前は、このようなアーキテクチャでWebサイトを実装することが一般的でした。

## 一般的なWebサイトとJamstackサイトの同じところ

一般的なWebサイト、JamstackサイトはどちらもWebサイトである点は共通です。Webブラウザを使ってWebサイトを訪れた場合、それが昔からのWebサイトなのか、Jamstackサイトなのかは一目では分からないかも知れません。

## 一般的なWebサイトとJamstackサイトの違うところ

一般的なWebサイトとJamstackサイトの大きく異なる点は、WebブラウザがWebサイトを訪問してから表示されるまでの流れにあります。

### 一般的なWebサイトの仕組み

一般的なWebサイト（CMSやEコマースサイトなど）というのは、次のような順番でWebサイトを表示します。

![Image (fetched from Gyazo)](https://t.gyazo.com/teams/diverta/bb3235f428d7fd67824efd4d8e9f5a79.png)
<!---
@startuml

Webブラウザ -> Webサーバー : リクエスト
Webサーバー -> アプリケーションサーバー : リクエスト
アプリケーションサーバー -> データベース : クエリ送信
データベース -> アプリケーションサーバー : ロジック実行
アプリケーションサーバー -> アプリケーションサーバー : HTML生成
アプリケーションサーバー -> Webサーバー : HTML
Webサーバー -> Webブラウザ : HTML
Webブラウザ -> Webブラウザ : HTML描画

@enduml
-->

1. WebブラウザがWebサーバーにリクエスト
2. Webサーバー内でアプリケーションサーバーとデータベースサーバーが情報をやり取り
3. アプリケーションサーバーがデータを使ってHTMLを生成
4. WebサーバーがHTMLをWebブラウザに返却
5. WebブラウザがHTMLを表示

WebブラウザとWebサイトでは、ページを移動するたびにこのやり取りが繰り返されます。

### Jamstackサイトの場合

それに対してJamstackを使って構築されているWebサイトは次のように実行されます。

![Image (fetched from Gyazo)](https://t.gyazo.com/teams/diverta/3f8843c5f29cb0bd22059f821f20dd55.png)
<!---
@startuml

Webブラウザ -> "Webサーバー/CDN" : リクエスト
"Webサーバー/CDN" -> Webブラウザ : HTML
Webブラウザ -> Webブラウザ : HTML描画

@enduml
-->

1. WebブラウザがWebサーバー（Jamstackの場合はCDNを利用するのが通常）にリクエスト
2. Webサーバー（またはCDN）がHTMLをWebブラウザに返却
3. WebブラウザがHTMLを表示

アプリケーションとデータベースのやり取り、そしてアプリケーションがHTMLを生成する部分がありません。動的な処理がないので表示が高速化し、システム負荷が小さくなります。さらにコンテンツはCDNを使って配信されるので、とても高速に配信および表示できます。

そして動的な部分（決済、認証、一部の動的コンテンツなど）は、外部サービスを通じて取得します。外部サービスはごく限られた機能を提供するものが多く、マイクロサービスと呼ばれます。Webブラウザはこうしたマイクロサービスを複数、必要に応じて呼び出して1つのWebサイトを構成します。

<!---
@startuml

Webブラウザ -> 外部サービスAPI : リクエスト
外部サービスAPI -> Webブラウザ : 結果のデータ
Webブラウザ -> Webブラウザ : HTML更新

@enduml
-->

![Image (fetched from Gyazo)](https://t.gyazo.com/teams/diverta/e45bc7c6daa17c4884807dd66880a701.png)
4. Webブラウザが外部サービスのAPI（マイクロサービス）をリクエスト
5. 外部サービスが処理結果をWebブラウザに返却
6. Webブラウザが処理結果に応じてHTMLを書き換え

一般的なWebサイトとの違いとして、外部サービスはHTMLを返却しません。データ（多くはJSON）をWebブラウザに返却します。そしてデータを受け取ったWebブラウザは、JavaScriptを使って表示します。

## Webブラウザで表示処理を行うメリット

サーバー側でHTMLを生成するのと、Webブラウザでデータから表示処理を行う違いは、表示速度にあります。HTMLを表示するのはWebブラウザにとって重たい処理になります。表示する際にはDOMを解釈し、スタイルシートを適用し、画像の高さや幅を計算して表示します。これをページ遷移の度に繰り返すため、Webサイトの表示が重たいと感じる原因になります。

Jamstackの場合、データだけを受け取ります。そのため必要な部分だけ表示を差し替える方式になります。HTML全体を表示し直すことがないので、表示が高速化されます。閲覧者の体感が良くなるので、UX（ユーザー体験）も向上します。クリックして画面を遷移するごとに、このユーザー体験の差は大きくなります。

また、HTMLを生成する負荷がなくなるので、サーバー側の負荷も軽減します。認証の伴うWebサイトの場合、生成されたHTMLのキャッシュはしづらいでしょう。しかしJamstackで利用されるデータにおいては、商品一覧などのユーザー認証に依存しないデータはキャッシュしても問題ありません。こうした点もサーバー負荷軽減につながります。
