Cache APIの使用

JavaScript

export default {
  async fetch(request, env, ctx) {
    const cacheUrl = new URL(request.url);

    // キャッシュURLからキャッシュキーを構築
    const cacheKey = new Request(cacheUrl.toString(), request);
    const cache = caches.default;

    // 値がすでにキャッシュに存在するか確認
    // 存在しない場合は、オリジンから取得し、キャッシュに保存する必要があります
    let response = await cache.match(cacheKey);

    if (!response) {
      console.log(
        `リクエストURL: ${request.url} のレスポンスがキャッシュに存在しません。リクエストを取得してキャッシュします。`,
      );
      // キャッシュにない場合は、オリジンから取得
      response = await fetch(request);

      // レスポンスのすべてのフィールドを継承するためにResponseコンストラクタを使用する必要があります
      response = new Response(response.body, response);

      // Cache APIはCache-Controlヘッダーを尊重します。s-max-ageを10に設定すると
      // レスポンスは最大10秒間キャッシュに保存されます

      // ここでレスポンスに加えた変更はキャッシュされた値に反映されます
      response.headers.append("Cache-Control", "s-maxage=10");

      ctx.waitUntil(cache.put(cacheKey, response.clone()));
    } else {
      console.log(`キャッシュヒット: ${request.url}。`);
    }
    return response;
  },
};

TypeScript

interface Env {}
export default {
  async fetch(request, env, ctx): Promise<Response> {
    const cacheUrl = new URL(request.url);

    // キャッシュURLからキャッシュキーを構築
    const cacheKey = new Request(cacheUrl.toString(), request);
    const cache = caches.default;

    // 値がすでにキャッシュに存在するか確認
    // 存在しない場合は、オリジンから取得し、キャッシュに保存する必要があります
    let response = await cache.match(cacheKey);

    if (!response) {
      console.log(
        `リクエストURL: ${request.url} のレスポンスがキャッシュに存在しません。リクエストを取得してキャッシュします。`,
      );
      // キャッシュにない場合は、オリジンから取得
      response = await fetch(request);

      // レスポンスのすべてのフィールドを継承するためにResponseコンストラクタを使用する必要があります
      response = new Response(response.body, response);

      // Cache APIはCache-Controlヘッダーを尊重します。s-max-ageを10に設定すると
      // レスポンスは最大10秒間キャッシュに保存されます

      // ここでレスポンスに加えた変更はキャッシュされた値に反映されます
      response.headers.append("Cache-Control", "s-maxage=10");

      ctx.waitUntil(cache.put(cacheKey, response.clone()));
    } else {
      console.log(`キャッシュヒット: ${request.url}。`);
    }
    return response;
  },
} satisfies ExportedHandler<Env>;

Python

from pyodide.ffi import create_proxy
from js import Response, Request, URL, caches, fetch

async def on_fetch(request, _env, ctx):
    cache_url = request.url

    # キャッシュURLからキャッシュキーを構築
    cache_key = Request.new(cache_url, request)
    cache = caches.default

    # 値がすでにキャッシュに存在するか確認
    # 存在しない場合は、オリジンから取得し、キャッシュに保存する必要があります
    response = await cache.match(cache_key)

    if response is None:
        print(f"リクエストURL: {request.url} のレスポンスがキャッシュに存在しません。リクエストを取得してキャッシュします。")
        # キャッシュにない場合は、オリジンから取得
        response = await fetch(request)
        # レスポンスのすべてのフィールドを継承するためにResponseコンストラクタを使用する必要があります
        response = Response.new(response.body, response)

        # Cache APIはCache-Controlヘッダーを尊重します。s-max-ageを10に設定すると
        # レスポンスは最大10秒間キャッシュに保存されます
        # ここでレスポンスに加えた変更はキャッシュされた値に反映されます
        response.headers.append("Cache-Control", "s-maxage=10")
        ctx.waitUntil(create_proxy(cache.put(cache_key, response.clone())))
    else:
        print(f"キャッシュヒット: {request.url}。")
    return response