프로젝트 성능 최적화하기 - cache (Star-Breaker-Raid)

wjd15sheep·2025년 2월 20일

프로젝트

목록 보기

4/10

Cache를 사용하는 이유는?

HTTP 캐시(Cache)란?

웹사이트나 앱을 이용하는 과정에서 이미지, HTML, CSS, JavaScript 파일과 같은 재사용 가능한 HTTP 리소스를 일정 기간 동안 저장하는 공간을 말합니다. 캐시는 브라우저, CDN, 서버 등 다양한 위치에서 활용될 수 있습니다.

캐시 장점

UX 측면: 캐시를 사용하면 응답 속도가 빨라져 사용자 경험이 향상됩니다.
서버 성능 최적화: API 요청이 줄어들어 서버 부하가 감소하고, 리소스를 더 효율적으로 사용할 수 있습니다.

하지만 캐시 정책을 잘못 설정하면 오히려 문제가 될 수도 있습니다. 예를 들어, 변경된 데이터를 캐시로 인해 최신 상태로 불러오지 못하는 경우가 발생할 수 있습니다. 따라서 적절한 캐싱 전략을 세우는 것이 중요합니다.

더 자세한 HTTP 캐시 정보는 이전 포스트
HTTP 캐시(Cache)에서 확인하세요.

프로젝트에서 세운 캐시 전략

star-breaker-raid 프로젝트에서 시행착오를 격으면서 세운 캐시에 대해서 설명하겠습니다.

정적 자산 (Static Assets)
대상 : 이미지, 아이콘, SVG, 폰트, CSS, JavaScript, 매니페스트
설정 :
```
Cache-Control: public, max-age=31536000, s-maxage=31536000, immutable
```
- max-age=31536000 : 브라우저는 1년(31536000초) 동안 캐시 유지
- s-maxage=31536000 → CDN(엣지 서버)은 1년(31536000초) 동안 캐시 유지
- immutable → 파일이 변경되지 않는 한, 브라우저는 강제 새로고침하지 않음

💡 이렇게 설정하면?

정적 파일은 1년 동안 캐시되므로 불필요한 다운로드를 방지하고 페이지 로딩 속도를 향상시킬 수 있습니다.
개발자 도구 네트워크에서 설정이 되었나 확인할 수 있습니다.

변경이 거의 없지만 1주 후 변경될 가능성이 있는 API Fetch 캐싱

대상 : 레이드 가이드, 레이드 보상 정보
설정 :
```
Cache-Control: public, max-age=86400, s-maxage=604800, stale-while-revalidate=3600
```
- max-age=3600 → 브라우저는 1시간 동안 캐시 유지
- s-maxage=604800 → CDN은 1주 동안 캐시 유지
- stale-while-revalidate=3600 → 캐시가 만료되어도, 기존 데이터를 즉시 반환하고, 백그라운드에서 새 데이터를 받아옴

💡 이렇게 설정하면?

자주 변경되지 않는 API 응답을 빠르게 제공하면서도, 최신 데이터가 필요할 때 백그라운드에서 업데이트할 수 있습니다.

사용자는 캐시된 데이터로 빠르게 응답을 받고, 백그라운드에서 최신 데이터가 갱신되므로 속도와 데이터 신뢰성을 모두 잡을 수 있습니다.
vercel log에서 HIT 하는 것을 확인할 수 있습니다.

실시간 응답이 필요한 API
대상 : TeacherRaidAPI, PostAPI
설정 :
```
'Cache-Control': 'public, max-age=0, s-maxage=5, stale-while-revalidate=3, must-revalidate',
  'Cache-Control': 'private, max-age=5, s-maxage=0, stale-while-revalidate=3, must-revalidate',
```
- public | private -> 공용 데이터는 public, 개인 데이터는 private
- max-age = 0 -> 브라우저는 항상 최신 데이터를 요청
- s-maxage=5-> CDN은 3초 동안 캐시 유지
- stale-while-revalidate=5 -> 캐시가 만료된 후에도 기존 데이터를 즉시 제공하며, 백그라운드에서 최신 데이터 가져오기