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サイトを表示します。

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

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

Jamstackサイトの場合

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

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

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

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

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で利用されるデータにおいては、商品一覧などのユーザー認証に依存しないデータはキャッシュしても問題ありません。こうした点もサーバー負荷軽減につながります。