웹 애플리케이션에서 네트워크 요청이 필요한 경우, fetch API는 많은 개발자들에게 사용되는 기술입니다. fetch API는 비동기적으로 서버에 대한 요청과 응답을 처리할 수 있으며, 캐싱 기능도 지원합니다. 이를 통해 웹 캐시를 효율적으로 관리할 수 있습니다.

웹 캐시의 중요성

웹 캐시는 네트워크 리소스를 저장하여 동일한 리소스에 대한 반복적인 요청을 피함으로써 웹 페이지의 성능을 향상시킵니다. 이를 통해 사용자의 대기 시간을 줄이고 브라우저의 네트워크 트래픽을 줄일 수 있습니다.

fetch API를 사용한 캐시 관리 전략

fetch API는 기본적으로 브라우저의 HTTP 캐시를 자동으로 활용합니다. 하지만 우리는 캐시 동작을 추가적으로 제어하고, 페이지 업데이트를 위해 최신 데이터를 가져와야 할 때도 존재합니다. 자바스크립트 fetch API를 사용하여 웹 캐시를 직접 관리할 수 있는 전략을 소개하겠습니다.

캐시 무시

fetch(url, { cache: "no-store" })
  .then(response => response.json())
  .then(data => {
    // 데이터 처리 로직 작성
  });

위 예제에서 cache: "no-store" 옵션은 브라우저의 캐시를 무시하고 항상 서버에서 새로운 데이터를 요청합니다. 이렇게 하면 항상 최신 데이터를 가져올 수 있으나, 네트워크 사용량이 많아질 수 있습니다.

캐시 우선

fetch(url, { cache: "force-cache" })
  .then(response => {
    if (response.ok) {
      return response.json();
    } else {
      throw new Error("서버 응답 오류");
    }
  })
  .then(data => {
    // 데이터 처리 로직 작성
  })
  .catch(error => {
    console.log(error);
  });

cache: "force-cache" 옵션을 사용하면 브라우저 캐시를 우선 사용하며, 캐시에 해당 리소스가 없을 경우에만 서버로 요청합니다. 이렇게 하면 네트워크 부하를 줄일 수 있습니다. 하지만 업데이트된 데이터를 가져오지 못할 수 있습니다.

캐시 및 네트워크 히트 체크

fetch(url)
  .then(response => {
    if (response.ok) {
      // 캐시 히트인지 확인
      if (response.headers.get("x-from-cache")) {
        console.log("캐시에서 가져옴");
      } else {
        console.log("서버에서 가져옴");
      }
      return response.json();
    } else {
      throw new Error("서버 응답 오류");
    }
  })
  .then(data => {
    // 데이터 처리 로직 작성
  })
  .catch(error => {
    console.log(error);
  });

위 예제는 서버 응답 헤더의 “x-from-cache” 값을 통해 캐시 히트 여부를 확인하는 방법을 보여줍니다. 이를 통해 캐시에서 가져온 데이터인지, 서버에서 가져온 데이터인지 확인할 수 있습니다.

마무리

fetch API를 사용하여 웹 캐시를 효과적으로 관리할 수 있습니다. 위에서 소개한 전략 중 적합한 방법을 선택하여 웹 애플리케이션의 성능을 향상시켜보세요. 캐시를 올바르게 활용하면 사용자 경험을 향상시킬 뿐만 아니라 네트워크 부하를 감소시킬 수 있습니다.