[Axios] cacheAdapterEnhancer를 사용한 API Caching

웹 페이지에서 AJAX 요청 시에 불필요한 중복 요청이 발생하는 경우는 뭐가 있을까?

페이지에 잘 바뀌지 않는 게시판(공지사항)이 존재한다고 가정하자.

공지사항 목록을 가져오는 API와 공지사항 내용을 불러오는 API는 약 1초가 소요된다고 가정한다.

이 페이지의 로직을 가정하면,

유저가 공지사항 목록 페이지에 접근하는 순간, 서버에서 공지사항 목록을 가져오기 위해 AJAX 요청이 호출된다. (1초)
렌더링 된 공지사항 목록 페이지에서 유저가 1번 공지사항을 클릭한다.
1번 공지 내용을 불러오는 요청이 호출된다. (1초)
뒤로가기로 다시 목록 페이지에 접근하는 순간, 공지사항 목록을 가져오기 위해 AJAX 요청이 호출된다. (1초)

실시간으로 글의 목록이 갱신되는 자유게시판이라면 이야기가 다르겠지만, 잘 바뀌지 않는 공지사항과 같은 게시판에서 4번 요청이 꼭 필요할까?

새로고침이나 push 이벤트에서만 새 요청을 호출하고 뒤로 가기와 같은 pop 이벤트에서는 새 요청 없이 기존 데이터를 활용한다면?

사용자 경험 향상뿐만 아니라, 불필요한 서버 트래픽도 절약 할 수 있을 것이다.

Axios와 axios-extensions를 사용한다면 이와 같은 API 캐싱을 쉽게 사용할 수 있다.

import axios from "axios";
import { cacheAdapterEnhancer } from "axios-extensions";


const axiosInstance: AxiosInstance = axios.create({
  adapter: cacheAdapterEnhancer(axios.defaults.adapter, {
  // 캐싱을 기본적으로 사용할지 안 할지 세팅
    enabledByDefault: false,
  }),
});


/** 요청시 **/

const targetUrl = "www.example.com/user"
const config = { /* axios 요청 config */};

axiosInstance.get(targetUrl, {
    ...config,
    cache: true,
});

cacheAdapterEnhancer 내부 로직을 보면, 요청에 대한 캐싱은 get에만 국한되는 것을 확인 할 수 있다.

(post, put을 비롯한 다른 요청에는 적용되지 않는다)