Cloudflare Workers でエッジキャッシュを最適化する方法

最近仕事で Cloudflare Workers を使う機会が増えてきた。CDN のエッジで処理を書けるのは便利だけど、キャッシュ戦略をちゃんと考えないとパフォーマンスが全然違う。

今回は Workers を使ったエッジキャッシュ最適化の実践的なテクニックをまとめる。

Cache API の基本

Workers には caches.default という組み込みのキャッシュストレージがある。これを使うとオリジンにリクエストを飛ばさずにエッジでレスポンスを返せる。

async function handleRequest(request) {
  const cacheKey = new Request(request.url, request)
  const cache = caches.default
  let response = await cache.match(cacheKey)
  if (response) return response
  response = await fetch(request)
  const headers = new Headers(response.headers)
  headers.set('Cache-Control', 'public, max-age=3600')
  const cachedResponse = new Response(response.body, {
    status: response.status, headers
  })
  ctx.waitUntil(cache.put(cacheKey, cachedResponse.clone()))
  return cachedResponse
}

Stale-While-Revalidate パターン

最近のベストプラクティスとして、stale-while-revalidate を使うとキャッシュが expired してもすぐにオリジンに飛ばさず、古いキャッシュを返しながらバックグラウンドで新しいキャッシュを取得する。

Cache-Control: public, max-age=300, stale-while-revalidate=86400

この設定だと、5分経ってもユーザーには即座にレスポンスが返り、サーバーへの負荷も最小限になる。

実際の効果

この最適化を導入した結果、オリジンサーバーの負荷が約70%削減され、レスポンスタイムも平均 200ms → 45ms に改善された。

次回は Workers KV と D1 を使ったデータベースレス設計について書く予定。