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)

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

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

Jamstackサイトの場合

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

Image (fetched from Gyazo)

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

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

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

Image (fetched from Gyazo)

  1. Webブラウザが外部サービスのAPI(マイクロサービス)をリクエスト
  2. 外部サービスが処理結果をWebブラウザに返却
  3. Webブラウザが処理結果に応じてHTMLを書き換え

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

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

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

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

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

お探しのページは見つかりましたか?解決しない場合は、問い合わせフォームからお問い合わせいただくか、Slackコミュニティにご参加ください。