자바스크립트 fetch API를 사용한 웹 캐시 관리 전략

10 Sep 2023

javascript

웹 애플리케이션을 개발하다 보면 서버에서 데이터를 가져와야 할 때가 많습니다. 이를 위해 자바스크립트의 fetch API를 사용할 수 있습니다. fetch API는 비동기 네트워크 요청을 처리하고 응답 데이터를 가져오는 기능을 제공합니다. 그러나 매번 데이터를 네트워크로 요청하는 것은 비효율적일 수 있습니다. 이때 웹 캐시를 사용하여 데이터 요청 횟수를 줄여 성능을 향상시킬 수 있습니다.

웹 캐시란 무엇인가요?

웹 캐시는 이전에 가져온 데이터를 로컬 저장소에 저장하여 동일한 데이터를 다시 요청할 때 네트워크 요청을 생략할 수 있는 메커니즘입니다. 웹 사이트를 방문할 때 브라우저는 서버에서 받은 리소스를 로컬에 저장하고, 이후에 같은 리소스를 요청할 때는 서버에 다시 요청하는 대신 로컬 캐시에서 데이터를 가져옵니다.

fetch API를 사용한 웹 캐시 구현 방법

fetch API는 기본적으로 캐시를 사용하지 않습니다. 하지만 HTTP 캐싱 헤더를 사용하여 캐시 동작을 제어할 수 있습니다. 다음은 fetch API를 사용하여 웹 캐시를 구현하는 예시 코드입니다.

// 캐시된 응답을 확인하는 함수
async function checkCache(request) {
  const cache = await caches.open('my-cache');
  const cachedResponse = await cache.match(request);
  return cachedResponse;
}

// 네트워크 요청을 캐시에 저장하는 함수
async function saveToCache(request, response) {
  const cache = await caches.open('my-cache');
  await cache.put(request, response.clone());
}

// fetch 이벤트 핸들러
self.addEventListener('fetch', (event) => {
  const request = event.request;
  event.respondWith(
    // 캐시된 응답 확인
    checkCache(request)
      .then((cachedResponse) => {
        if (cachedResponse) {
          // 캐시에서 데이터 반환
          return cachedResponse;
        } else {
          // 네트워크로 요청
          return fetch(request)
            .then((networkResponse) => {
              // 캐시에 응답 저장
              saveToCache(request, networkResponse);
              return networkResponse;
            })
            .catch((error) => {
              console.error('Error fetching data:', error);
            });
        }
      })
  );
});

이 예시 코드는 fetch 이벤트 핸들러를 사용하여 요청마다 캐시된 응답을 확인하고, 캐시가 있으면 캐시된 응답을 반환하고, 그렇지 않으면 네트워크로 요청하여 새로운 응답을 받아와 캐시에 저장하는 방식입니다.

웹 캐시 관리 전략

웹 캐시를 효율적으로 관리하기 위해서는 몇 가지 전략을 고려해야 합니다.

캐시 키 관리: 동일한 데이터를 다룰 때 캐시 키를 일관되게 관리해야 합니다. 캐시 키는 요청 URL이나 데이터의 식별자를 사용하는 것이 좋습니다.
캐시 유효성 검사: 캐시된 데이터가 유효한지 확인해야 합니다. 서버에서 응답할 때 HTTP 헤더를 통해 데이터의 유효 기간을 설정하는 것이 중요합니다.
캐시 최적화: 불필요한 데이터를 캐시하지 않고 필요한 데이터만 캐시에 저장해야 합니다. 크기가 큰 파일이나 자주 업데이트되는 데이터의 경우에는 캐시를 사용하지 않는 것이 좋습니다.
캐시 갱신: 데이터가 업데이트되었을 때 캐시를 갱신하는 방법을 고려해야 합니다. 주기적인 갱신이나 사용자의 요청에 따른 갱신 등을 고려할 수 있습니다.

결론

자바스크립트 fetch API를 사용하여 웹 캐시를 구현하면 서버에 네트워크 요청을 최소화하여 성능을 향상시킬 수 있습니다. 캐시 관리 전략을 잘 고려하여 적절한 데이터를 캐시에 저장하고, 유효성을 검사하여 올바른 데이터를 반환하도록 구현해야 합니다. 웹 캐시는 웹 애플리케이션의 성능과 사용자 경험을 향상시키는 중요한 도구입니다.