API 응답을 캐싱할 때 꼭 확인할 것

사용자 목록 API 응답이 느렸다. 데이터는 많지 않은데 왜 자꾸 느릴까 싶었다. 응답 헤더를 확인해보니 캐시 지시자가 없었다.

응답 헤더 확인하기

먼저 curl로 응답 헤더를 확인하는 게 기본이다.

curl -i 'https://example.com/api/items?page=1'

-i 플래그로 응답 헤더를 함께 본다. Cache-Control, ETag, Last-Modified 같은 헤더가 있는지 확인하자.

캐시 헤더의 종류

• Cache-Control: public, max-age=300: 5분 동안 캐시하라
• Cache-Control: private, max-age=60: 사용자 브라우저에만 캐시, 공용 캐시(CDN)에는 안 함
• ETag: 콘텐츠가 바뀌었는지 확인하는 해시값. If-None-Match로 전송하면 304 Not Modified 응답
• Last-Modified: 마지막 수정 시간. If-Modified-Since로 전송하면 304 응답

어떤 캐시 전략을 쓸까

API 응답을 캐싱할 때 중요한 건 데이터 특성에 맞게 설정하는 것이다:

• 자주 바뀌지 않는 데이터 (카테고리 목록, 설정값): max-age=3600 (1시간) 이상
• 중간 정도 주기로 바뀌는 데이터 (사용자 목록): max-age=300 (5분)
• 실시간이어야 하는 데이터 (현재 주문, 알림): max-age=0 (캐싱 안 함)

클라이언트에서 캐시 활용하기

fetch나 axios를 쓸 때 브라우저 캐시를 제대로 활용하려면:

fetch('/api/items?page=1', {
  method: 'GET',
  headers: {
    'If-None-Match': previousETag // 이전 응답의 ETag
  }
})

304 응답이 오면 이전 캐시를 사용하고, 200 응답이 오면 새로운 데이터를 받는다.

캐시 무효화 시기

데이터가 바뀔 때는 캐시를 무효화해야 한다. POST나 PUT, DELETE 요청 후에는 관련된 GET 엔드포인트의 캐시를 지워야 한다.

SWR이나 React Query 같은 라이브러리를 쓰면 이 부분이 훨씬 편하다. 자동으로 캐시 무효화를 처리해준다.

실제로 얼마나 빨라지나

캐시를 설정했을 때와 안 했을 때 차이는 명확하다. 같은 요청을 반복하면:

• 캐시 없음: 매번 200ms, 300ms 정도
• 캐시 있음: 처음 200ms, 그 다음부터는 0ms (로컬 캐시에서 즉시 반환)

사용자 입장에서는 체감하는 속도가 크게 달라진다.