メインコンテンツまでスキップ

Jamstackと従来のウェブサイトの違い

· 約7分
Diverta

このセクションでは、Jamstackで構築されたウェブサイトと従来のサイトの違いについて説明します。

注意

この文章は機械翻訳によって提供されています。原文は英語であり、OpenAIによって翻訳されました。

従来のウェブサイトとは何ですか?

このガイドでは、従来のウェブサイトとは、以下の基本的なサーバーアーキテクチャを使用して実装されたウェブサイトを指します。具体的なケースによっては、PHPのウェブサイトは統合されたHTTPサーバーとアプリケーションサーバーを持っています。

ウェブ(HTTP)サーバー

ウェブブラウザからのリクエストを受け取り、アプリケーションサーバーを呼び出します。それからHTMLを受け取り、ブラウザに返します。一部のウェブサーバーは静的なコンテンツを保持し、HTMLと画像を変更せずに返します。

アプリケーションサーバー

ウェブサーバーからデータを受け取り、データベースサーバーと情報をやり取りします。その後、HTMLを生成し、ウェブサーバーに送信します。

データベースサーバー

データベースサーバーは、ユーザー、製品、コンテンツなどの情報を保存します。アプリケーションサーバーから呼び出されると、要求されたデータを返します。

Web APIベースのサイトが登場する前は、上記のアーキテクチャが一般的に実装されていました。

従来のウェブサイトとJamstackウェブサイトの類似点

従来のウェブサイトとJamstackウェブサイトは見た目が同じに見える場合があります。ブラウザでサイトを訪れた際に最初にどちらのサイトか判断することはできないかもしれません。

従来のウェブサイトとJamstackウェブサイトの違い

両者の主な違いは、ブラウザのタスクフローがサイトの訪問からコンテンツの表示までの間でどのように進行するかです。

従来のウェブサイトの動作方法

従来のウェブサイト(例:CMS、eコマースサイト)は、以下のプロセスを経て表示されます。

Image from Gyazo

  1. ブラウザがウェブサーバーにリクエストを送信します。
  2. アプリケーションサーバーとデータベースサーバーがウェブサーバー内で情報をやり取りします。
  3. アプリケーションサーバーがデータを使用してHTMLを生成します。
  4. ウェブサーバーがHTMLをブラウザに返します。
  5. 最後に、ブラウザがHTMLを表示します。

ブラウザとウェブサイトは、異なるページに移動するたびに上記のやり取りを行います。

Jamstackウェブサイトの動作方法

対照的に、Jamstackで構築されたウェブサイトは以下の仕組みに従います。

Image from Gyazo

  1. ブラウザがウェブサーバー(通常はCDN)にリクエストを送信します。
  2. ウェブサーバー(またはCDN)がHTMLをブラウザに返します。
  3. ブラウザがHTMLを表示します。

アプリケーションサーバーはデータベースとやり取りせず、HTMLを生成しません。動的な処理が行われないため、システムの負荷が大幅に軽減され、ウェブサイトの表示が速くなります。さらに、CDNもコンテンツの配信と表示を高速化します。

動的な部分(例:支払い、認証、特定のコンテンツタイプ)は、「マイクロサービス」と呼ばれる外部サービスを介して取得されます。これらのサービスは通常、非常に限定的な機能を提供するため、ブラウザは通常、1つのウェブサイトに必要なだけの複数のマイクロサービスを呼び出します。

Image from Gyazo

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

従来のウェブサイトの場合とは異なり、外部サービスはデータを主にJSON形式で(HTMLではなく)ウェブブラウザに返します。ブラウザはJavaScriptを使用してデータを表示します。

ウェブブラウザによる表示処理の利点

サーバーサイドでのHTML生成とブラウザによる表示処理の違いは、表示速度にあります。ブラウザにとって、HTMLの表示にはDOMの解釈、スタイルシートの適用、画像の高さと幅の計算など、重い処理が必要です。このプロセスは、各ページ遷移ごとに繰り返され、サイトの表示に遅延が生じます。

Jamstackでは、データのみが返されるため、表示要素は必要な箇所のみ置き換えられます。これにより、全体のHTMLを再表示する必要がなくなり、読み込み速度が大幅に向上します。画面間のクリックごとにユーザーエクスペリエンス(UX)も向上します。

さらに、JamstackではサーバーがHTMLを生成する必要がなくなります。認証が必要なサイトでは、生成されたHTMLをキャッシュすることが難しい場合があります。しかし、Jamstackでは、ユーザー認証に依存しないデータ(製品リストなど)は問題なくキャッシュすることができます。これにより、サーバーの負荷も軽減されます。

Kurocoはエンタープライズ向けのプロジェクトを想定して構築されています

エンタープライズ向けのヘッドレスCMSであるKurocoには、高いスケーラビリティ、セキュリティ、パフォーマンスを実現するためのサーバーレスインフラストラクチャが備わっています。

Kurocoでは、異なるパスに異なるマイクロサービスのエンドポイントを含むAPIを設定することもできます。

今日から無料で始めて試すことができます。ご質問がある場合は、カスタマーサポートチームにお問い合わせください