Cache API로 Worker 가속화 (5줄 코드)

Source: Dev.to

5줄로 구현하는 Cache API 사용법

export default {
  async fetch(request) {
    const cache = caches.default;
    let response = await cache.match(request);
    if (!response) {
      response = await fetch(request);
      response = new Response(response.body, response);
      response.headers.set('Cache-Control', 'max-age=3600');
      await cache.put(request, response.clone());
    }
    return response;
  }
};

성능 영향

• 캐시 적용 전: 모든 요청이 원본 서버에 도달 (지연 시간 200‑500 ms, CPU 사용량 높음).
• 캐시 적용 후: 캐시된 요청은 10 ms 미만으로 반환되며, 히트율은 보통 70‑90 %이고 CPU 사용량이 최소화됩니다.
• 내 API 예시:
  • P50 지연 시간: 450 ms → 15 ms
  • P95 지연 시간: 800 ms → 25 ms
  • 캐시 히트율: 85 %

모범 사례

• GET 요청만 캐시합니다.
• 적절한 TTL을 설정하세요 (예: 1시간을 의미하는 max-age=3600). 영구 캐시는 피합니다.
• 서로 다른 변형(쿼리 파라미터, 헤더 등)에 대해 별도 캐시 키를 사용합니다.
• 기본 데이터가 변경될 때는 캐시를 무효화하거나 업데이트합니다.

추가 자료

더 많은 성능 패턴을 확인하려면 전체 가이드를 참고하세요: https://appybot.gumroad.com/l/oatoe