[Axios] cacheAdapterEnhancer를 사용한 API Caching

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

 

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

 

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

 

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

1. 유저가 공지사항 목록 페이지에 접근하는 순간, 서버에서 공지사항 목록을 가져오기 위해 AJAX 요청이 호출된다. (1초)
2. 렌더링 된 공지사항 목록 페이지에서 유저가 1번 공지사항을 클릭한다.
3. 1번 공지 내용을 불러오는 요청이 호출된다. (1초)
4. 뒤로가기로 다시 목록 페이지에 접근하는 순간, 공지사항 목록을 가져오기 위해 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을 비롯한 다른 요청에는 적용되지 않는다)

 

cacheAdapterEnhancer.js

 

또한 캐싱의 기준은 쿼리 파라미터를 포함한 url 그 자체이기 때문에, 쿼리 파라미터가 바뀔때마다 새로 캐싱 데이터가 생성된다.

 

util/buildsortedUrl.js

---

요청에 대한 캐싱 여부를 on/off 할 때, forceUpdate를 사용해야 하는지 cache를 사용해야 하는지 헷갈렸는데, 소스코드를 보니 아래 두 코드의 실질적인 동작은 동일하다는 것을 알 수 있었다.

 

 

cacheAdapterEnhancer를 확인해보자

 

config에 있는 cache에는 boolean값과 Cache 객체가 올 수 있기 때문에 이런 식으로 분리되어있다.

 

결론적으로는

 

캐시객체를 외부에서 관리하지 않을 거라면 cache 값을 boolean으로 캐싱 여부를 관리해도 된다.

 

캐시 객체를 외부에서 관리한다면 forceUpdate를 통해서 캐싱 여부를 관리하면 된다.