キャッシュ戦略
CloudflareのCDNとWorkers Cache APIを使って効果的なキャッシュ機構を実装し、レイテンシを削減します
「キャッシュ戦略」はCoddyKit上の無料Edge Computing with Cloudflare Workers & Denoレッスンです。 これはレッスン1/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはEdge Computing with Cloudflare Workers & Deno学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Edge Computing with Cloudflare Workers & Denoコースには全4レッスンが含まれています。
このレッスンの一部はまだ翻訳されておらず、英語で表示されています。
What is Caching?
Imagine you need to grab a book. If it's on your desk, it's super fast! If it's at the local library, it's still quick. But if you have to order it from a distant warehouse, it takes much longer.
Caching works similarly. It's the process of storing copies of frequently accessed data closer to where it's needed, speeding up future requests.
Why Cache at the Edge?
In edge computing, 'closer' means at the edge of the network, near your users. Caching at the edge offers several key benefits:
- Reduced Latency: Content reaches users faster.
- Reduced Origin Load: Your main servers handle fewer requests.
- Improved User Experience: Websites and applications feel snappier.
Cloudflare CDN Caching
Cloudflare's Content Delivery Network (CDN) is your first line of defense for caching. It automatically stores static assets (like images, CSS files, and JavaScript bundles) at its global network of edge locations.
When a user requests one of these assets, Cloudflare serves it from the nearest edge server, not your origin server.
HTTP Cache-Control Headers
You can tell CDNs and browsers how to cache your content using HTTP Cache-Control headers. These headers are sent with your server's response.
max-age=X: Resource is fresh forXseconds.s-maxage=Y: Specifically for shared caches (CDNs), overridesmax-age.no-cache: Must revalidate with origin before serving cached content.no-store: Never cache this content.
Workers Cache API Intro
While Cloudflare's CDN handles static assets, what about dynamic content or API responses? That's where the Cloudflare Workers Cache API comes in.
This powerful API allows your Worker to programmatically store and retrieve any HTTP Response object in Cloudflare's global cache, giving you fine-grained control.
Basic Cache API Flow
The Workers Cache API uses a simple key-value pattern:
- Key: An
HTTP Requestobject (or a URL string). - Value: An
HTTP Responseobject.
You use cache.put(request, response) to store and cache.match(request) to retrieve.
Storing with cache.put()
Let's write a Worker that fetches a resource from an origin and then stores a copy of its response in the cache using cache.put(). This makes it available for future requests.
addEventListener('fetch', event => {
event.respondWith(handleRequest(event));
});
async function handleRequest(event) {
const request = event.request;
const cacheKey = new Request(request.url, request); // Key for cache
const cache = caches.default; // Get default cache storage
// Fetch from the origin server
const response = await fetch(request);
// Store a clone of the response in cache
// event.waitUntil ensures caching happens in background
event.waitUntil(cache.put(cacheKey, response.clone()));
return response; // Return the original response
}Retrieving with cache.match()
Now, let's modify the Worker to first check if the requested resource is in the cache using cache.match(). If found, we return the cached version immediately. Otherwise, we fetch from the origin and then cache it.
addEventListener('fetch', event => {
event.respondWith(handleRequest(event));
});
async function handleRequest(event) {
const request = event.request;
const cacheKey = new Request(request.url, request);
const cache = caches.default;
// Try to find the response in cache
let response = await cache.match(cacheKey);
if (response) {
// Cache hit! Return cached response
return response;
}
// Cache miss. Fetch from origin
response = await fetch(request);
// Store the new response in cache for next time
event.waitUntil(cache.put(cacheKey, response.clone()));
return response;
}Cache Invalidation & Best Practices
Effective caching requires managing stale data. Here are some tips:
- Purging: Use the Cloudflare dashboard or API to invalidate specific URLs.
- Vary Header: Use the
VaryHTTP header (e.g.,Vary: Accept-Encoding) to cache different versions based on request headers. - Time-based Expiry: Set appropriate
Cache-Controlheaders or options incache.put()to automatically expire cached items.
Test Your Knowledge
The Cloudflare Workers Cache API allows you to programmatically control caching. Which method is used to store a response in the cache?
Recap: Caching Strategies
In this lesson, we explored powerful caching strategies to optimize performance at the edge:
- Cloudflare's CDN automatically caches static assets.
- HTTP
Cache-Controlheaders allow you to define caching behavior. - The Workers Cache API provides programmatic control for caching dynamic content.
- Proper cache invalidation and management are crucial for fresh data.
Mastering caching is key to building fast, efficient edge applications!
よくある質問
「キャッシュ戦略」レッスンは無料ですか？
はい。「キャッシュ戦略」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Edge Computing with Cloudflare Workers & Denoコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Edge Computing with Cloudflare Workers & Denoコースには全4レッスンが含まれています。
「キャッシュ戦略」で何を学びますか？
CloudflareのCDNとWorkers Cache APIを使って効果的なキャッシュ機構を実装し、レイテンシを削減します ブラウザで直接実行するハンズオンコードでEdge Computing with Cloudflare Workers & Denoを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
Edge Computing with Cloudflare Workers & Denoを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのEdge Computing with Cloudflare Workers & Denoは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン1/4です。
「キャッシュ戦略」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このEdge Computing with Cloudflare Workers & Denoレッスンでコードを書いて実行できますか？
はい。すべてのEdge Computing with Cloudflare Workers & Denoレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。