静的コンテンツと動的コンテンツのキャッシュ|仕組みは?

静的コンテンツとは異なり、動的コンテンツはユーザーごとに異なります。つまり、複数のユーザーに配信することはできず、キャッシュすることは困難です。ただし、適切なテクノロジーを使用すれば、動的コンテンツをキャッシュできます。

Share facebook icon linkedin icon twitter icon email icon

静的コンテンツと動的コンテンツのキャッシュ

学習目的

この記事を読み終えると、以下のことができます。

  • 静的コンテンツと動的コンテンツの区別
  • 動的コンテンツのキャッシュが難しい理由と、新しいテクノロジーが動的コンテンツのキャッシュを可能にする方法を学ぶ
  • 動的コンテンツキャッシングと動的コンテンツ圧縮の違いを理解する
  • Edge Side Includesタグを使用して動的Webページの静的部分をキャッシュする方法を学ぶ

静的コンテンツと動的コンテンツの違いとは?

静的コンテンツは、サーバーに保存されている任意のファイルであり、毎回同じものがユーザーに配信されます。HTMLファイルと画像は、この種のコンテンツの例です。静的コンテンツは新聞のようなもので、1が発行されると、日中にどんな新しい出来事が起ころうとも、その版を読むすべての人に向けて終日、同じ記事と写真が掲載されます。

動的コンテンツは、訪問時間、位置、デバイスなどのユーザー固有の要因に基づいて変化するコンテンツです。動的なWebページは誰にとっても同じ表示にはならず、ユーザーと関わるにつれて変化することもあります。–たとえば、新聞が誰かが読んでいる間に自動的に書き変わるような感じです。これにより、Webページはよりパーソナライズされ、よりインタラクティブになります。

静的コンテンツのキャッシュ

動的コンテンツのキャッシュ

最新のニュースWebサイトは、動的コンテンツの良い例です。新聞とは異なり、記事は終日更新され、ホームページの見出しはサイト訪問者の位置やログインステータスに基づいて異なる場合があります。ソーシャルメディアページもまた別の事例です。Facebookのニュースフィードの表示はユーザーごとにまったく異なっていて、ユーザーはコンテンツと関わりあうことでコンテンツを変更できます(投稿を「いいね!」、シェア、コメントするなど)。

動的Webページは静的HTMLファイルとして保存されません。代わりに、 サーバー側のスクリプトが、ユーザーインタラクションやユーザーログインなどのイベントに応答してHTMLファイルを生成し、HTMLファイルをWebブラウザに送信します。動的コンテンツはサーバー側で生成されるため、通常はキャッシュではなく配信元サーバーから提供されます。

長い間、動的コンテンツはキャッシュ不可と見なされていました。しかし、新しいテクノロジーにより、Webサイトはキャッシュから動的コンテンツを提供でき、ユーザー体験をインタラクティブに保ちながらレイテンシーを大幅に削減できます。

静的コンテンツのキャッシュの方法は?

通常のWebキャッシュプロセスでは、キャッシュは、コンテンツが提供されるときに静的ファイルのコピー(画像など)を保存するため、次回はユーザーにより近くなり、より速く配信されます。ブラウザとコンテンツ配信ネットワーク(CDN)は、設定された期間、静的コンテンツをキャッシュし、コンテンツが引き続き要求される限りユーザーに提供できます。これは静的コンテンツが時間とともに変化しないために可能なもので、同じファイルが何度もユーザーに配信されます。

動的コンテンツのキャッシュの仕組みは?

動的コンテンツは、ページ上のコンテンツを変更するスクリプトによって生成されます。遠くにある配信元サーバーではなくCDNキャッシュでスクリプトを実行することにより、動的コンテンツをキャッシュから生成して配信できます。これによって動的コンテンツは本質的に「キャッシュされる」ものとなり、わざわざ配信元から提供する必要がないため、クライアントリクエストへの応答時間が短縮され、動的Webページが高速化されます。

Cloudflare Workersを例にとると、これはCloudflare CDNで実行されるサーバーレスJavaScript関数です。デバイスの種類、時刻、ユーザーの位置、サードパーティAPIからのデータなど、さまざまなイベントや入力に応答できます。これらのパラメータに基づいて、動的コンテンツを生成してクライアントデバイスに提供したり、静的コンテンツを変更、キャッシュ、またはキャッシュから削除したりできます。

Cloudflare WorkersはJavaScriptコードであるため、開発者はこれらを使用して、動的コンテンツのキャッシュに加えて、幅広い機能またはアプリケーション全体を構築できます。さらに、Cloudflare Workers`をリリースして、数秒で世界中のCDNロケーションに伝達できます。

Cloudflare Workersは軽量の実行環境で実行されるため、コードのスピンアップから実行が数ミリ秒で可能です。開発者は、バックエンドの構成を気にせずにコードを実行できます。サーバーレスコンピューティングの詳細。

動的コンテンツのキャッシュと動的コンテンツの圧縮の違いとは?

動的Webページを高速化する別のアプローチは、配信元サーバーによって生成された動的コンテンツを圧縮し、可能な限り迅速かつ効率的に配信することです。動的圧縮では、コンテンツはキャッシュではなく配信元サーバーから取得されますが、生成されるHTMLファイルは非常に小さくなり、クライアントデバイスにより速く到達できます。 Railgun は、動的コンテンツを圧縮してパフォーマンスを向上させる製品の例です。

Edge Side Includes(ESI)を使用して動的Webページを高速化する方法は?

多くの場合、動的Webページ上の大量のコンテンツはすべてのユーザーに対して同じであり、ページ上の特定の要素のみが動的です。これは、HTMLコードの多くはページの動的コピーそれぞれに重複していることを意味します。この非効率性を解決するために、多くの企業が協力して、Webページ上の動的コンテンツの表示場所を指定するマークアップ言語であるEdge Side Includes(ESI)を開発しました。 (ESIは一部のCDNで使用されていますが、Web標準を管理する組織であるW3Cではまだ受け入れられていません。)

ESIタグ付きのコンテンツを別の場所から取得する一方で、Webページのその他のコンテンツはキャッシュできます。一部のWebページのみが動的に生成され、残りがキャッシュされる場合、Webページは、各ユーザーに対してページ全体を生成する必要がある場合よりもはるかに速く読み込まれます。 ESIをCloudflare Workersと組み合わせて、プロセスをさらに効率化することができます。