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

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

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

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

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

動的Webページは静的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と組み合わせて、プロセスをさらに効率化することができます。