COLUMN
2024年05月30日
フロントエンドを高速化するキャッシュ技術
カテゴリー：テクノロジー
タグ：フロントエンド
フロントエンドアプリケーションのパフォーマンスを向上させるためには、キャッシュ技術を活用することが重要です。キャッシュ技術を活用すれば、ユーザーがアプリケーションを利用する際に、サーバーからデータを取得する回数を減らせます。これにより、アプリケーションの読み込み速度を向上させ、操作性が良くなります。
この記事では、フロントエンドアプリケーションで利用できるキャッシュ技術について解説します。
キャッシュ戦略の種類
フロントエンドアプリケーション開発で考えられるキャッシュ戦略には、以下のような種類があります。
- ブラウザキャッシュ
- サーバーキャッシュ
- CDN（Content Delivery Network）
- Web Storage
- IndexedDB
- Cache API/Cache Storage API
- インメモリ
この他、Application Cacheもありますが、これは非推奨APIとなっています（Service Workerへの変更が推奨されています）。
ブラウザキャッシュ
ブラウザキャッシュは多くのブラウザで標準実装されているキャッシュです。ブラウザキャッシュは、HTTPキャッシュヘッダーを利用して、リソースをキャッシュします。キャッシュされたリソースは、同じURLにアクセスした際に、サーバーに再度リクエストを送信せずに、キャッシュされたデータを利用します。
あるリソース（画像など）にアクセスした際に、サーバーから以下のようなヘッダーを付けてレスポンスを返します。
Cache-Control: max-age=604800
この場合、リソースはキャッシュされている期間（ここでは1週間）は、ブラウザキャッシュに保存されます。次回以降、同じリソースにアクセスした際には、サーバーにリクエストを送信せずに、キャッシュされたデータを利用します。
キャッシュのサイズはブラウザによって異なり、かつストレージに依存します。そのため、常にキャッシュが有効である保証はありません。
サーバーキャッシュ
サーバーキャッシュは、サーバー側でキャッシュを行う技術です。サーバーキャッシュを利用することで、サーバーからのレスポンスをキャッシュし、次回以降のリクエストに対して、キャッシュされたデータを返すことができます。
良くある方法としては、Redisを用いた方法があります。Redisに対して、URLをキーとしてレスポンス内容を保存することで、次にWebサーバー（nginxなど）にリクエストが来た際に、Redisからデータを取得して返すことができます。
もう一つはローカルにファイルとしてキャッシュする方法です。これはWebサーバーなどと連携が不要で、アプリケーションレベルで実装できるのが魅力です。また、キャッシュをURL単位ではなく、部分単位でできるのも魅力です。
CDN（Content Delivery Network）
CDNはキャッシュと高速ネットワークを利用したコンテンツ配信サービスです。CDNを利用することで、ユーザーからのリクエストに対して、最も近いサーバーからコンテンツを配信することができます。これにより、ユーザーの待ち時間を短縮し、コンテンツの読み込み速度を向上させることができます。
キャッシュも利用されているので、繰り返しのアクセスに対して、素早くレスポンスを返せます。また、CDNはセキュリティ対策もされているので、DDoS攻撃などのリスクを軽減することができます。なるべく画像や動画などの静的コンテンツはCDNを利用することをおすすめします。
Web Storage
Web Storageは、ブラウザにデータを保存するための仕組みです。Web Storageには、以下の2つの仕組みがあります。
- LocalStorage
- SessionStorage
違いは、データの保存期間です。LocalStorageはデータを永続的に保存しますが、SessionStorageはセッションが終了するとデータが削除されます。どちらもインタフェースは同じで、キーと値のペアを保存することができます。キーと値、両方とも文字列で保存されます。JSONなどであれば、文字列にして保存します。
IndexedDB
IndexedDBは、ブラウザ上で動作するデータベースです。IndexedDBは、キーと値のペアを保存し、インデックスを作成して高速に検索することができます。IndexedDBは、トランザクションをサポートしてデータの整合性を保ち、スキーマのバージョン管理ができます。また、ほとんどの操作が非同期で行われるため、UIスレッドをブロックすることなくデータベース操作ができます。
Web Storageとの違いは、スキーマを定義できる点にあります。IndexedDBは、オブジェクトストア（テーブルのようなもの）を定義し、インデックスを作成することができます。これにより、複雑なデータ構造を保存し、高速に検索することができます。
IndexedDB - MDN Web Docs 用語集: ウェブ関連用語の定義 | MDN
Cache API/Cache Storage API
Cache APIは、ブラウザのキャッシュを操作するためのAPIです。Cache APIを利用することで、リソースをキャッシュし、キャッシュされたリソースを取得することができます。Cache APIは、Service Workerなどと組み合わせて利用されることが多いです。
ブラウザキャッシュとの違いは、Cache APIは開発者がキャッシュするコンテンツを制御できる点にあります。ブラウザキャッシュは、HTTPキャッシュヘッダーを利用して、サーバーがキャッシュするリソースを制御しますが、Cache APIは開発者が任意のリソースをキャッシュすることができます。なお、キャッシュを自動的に消す機能はないので、キャッシュを削除する機構も自前で実装する必要があります。
Cache APIはService Workerと組み合わせた際に、URLリクエスト実行前に呼ばれます。そこでコンテンツを返すことで、オフラインでのWebアプリケーション利用も可能になります。
インメモリ
インメモリは、メモリ上にデータを保存する技術です。たとえばGraphQLライブラリであるApollo Clientにはキャッシュ機能が備わっています。REST APIライブラリで有名なaxiosでは、axios-cache-adapterを使うことで、キャッシュを実現できます。
これらを使うことで、ネットワークアクセスを減らし、アプリケーションのパフォーマンスを向上できます。
キャッシュの勘所
フロントエンドアプリケーションでキャッシュを考える際には、以下の点に注意する必要があります。
- 何のコンテンツをキャッシュするか
- どこにキャッシュするか
- キャッシュの有効期限・削除方法
1の「何のコンテンツをキャッシュするか」については、以下の3つに分類されます。
- 静的コンテンツ
- 動的コンテンツ（パブリック）
- 動的コンテンツ（プライベート）
静的コンテンツについては、ブラウザのキャッシュコントロールやCDNを利用することで、効果的にキャッシュすることができます。動的コンテンツは、誰でも同じ内容であるパブリックなコンテンツと、ユーザー毎（認証状態毎）に変わるコンテンツに分かれます。
パブリックなコンテンツは、サーバーキャッシュが有効です。プライベートなコンテンツをキャッシュするのはあまりお勧めしませんが、もし必要な場合には、Web StorageやIndexedDBの利用が考えられます。
Cache APIは、主にオフラインでのWebアプリケーション利用に効果を発揮します。もちろん、パフォーマンス向上での利用も可能です。
キャッシュの削除・更新
キャッシュの削除は常に問題です。ブラウザのキャッシュコントロールには有効期限が設けられます。しかし、他のキャッシュ方法では基本的に有効期限はありません。SessionStorageはセッション終了時に削除されますが、LocalStorageやIndexedDBは手動で削除する必要があります。
プライベートなデータをキャッシュしてしまい、別な人がログインし直した際にデータが見られてしまう事態にならないように注意しましょう。また、Cache APIは定期的に削除する仕組みを設けておかないと、表示が更新されないという問題につながります。
勘所として「ログアウト処理をする際に全データを消す」「Cache APIは、キャッシュを返しつつも裏でデータを取得し直す」があります。Cache APIはオフラインでのアプリケーション利用ができるので便利ですが、キャッシュの削除が難しいので、注意が必要です。
Googleが開発しているWorkboxを使うと、Cache APIに有効期限を付けられるのでお勧めです。
まとめ
Webアプリケーションのパフォーマンスを向上させる上で、キャッシュはとても大事です。キャッシュ技術はさまざまあり、それぞれに特徴があります。各特徴を理解し、最適なキャッシュ技術を最適な場面で利用してください。また、キャッシュの削除や更新については、データの整合性を保つようにしましょう。
HexabaseではエンタープライズレベルのBaaSを提供しており、Webアプリケーション開発を強力にサポートしています。ぜひご利用ください。
役に立ったら、記事をシェアしてください
