웹 캐시

📌웹 캐시의 종류

웹 캐시는 웹페이지와 관련된 리소스(HTML, CSS, JavaScript, 이미지 등)를 임시로 저장하여, 동일한 리소스를 재요청할 때 더 빠르게 제공하는 기술입니다. 이를 통해 네트워크 요청을 줄이고, 페이지 로딩 속도를 최적화하며, 서버 부하를 감소시킬 수 있습니다.

 

💬웹 캐시의 종류

1. 브라우저 캐시
   • 브라우저에 의해 관리되며, 사용자가 웹페이지를 방문할 때 다운로드한 리소스를 로컬 저장소(디스크 또는 메모리)에 저장합니다.
   • 예: 동일한 이미지를 포함한 여러 페이지를 방문할 때, 이미지가 서버에서 다시 다운로드되지 않고 로컬 캐시에서 로드됨. 동일한 페이지에 접속할 때 더 빠르게 접속 가능
2. 프록시 캐시
   • 클라이언트와 서버 사이의 프록시 서버에서 캐싱을 수행합니다.
   • 네트워크 단위에서 여러 사용자가 동일한 리소스를 요청할 경우, 프록시 서버가 캐싱된 데이터를 제공해 네트워크 부하를 줄입니다.
3. CDN 캐시
   • 전 세계에 분산된 콘텐츠 전송 네트워크(CDN) 서버가 리소스를 캐싱합니다.
   • 사용자와 가까운 CDN 서버에서 리소스를 제공하여 응답 속도를 크게 개선합니다.
4. 애플리케이션 캐시
   • 웹 애플리케이션 내부에서 특정 데이터를 캐싱하여, API 호출 결과를 재사용하거나, 동적인 데이터를 로컬에서 유지합니다.
   • 예: React Query, Apollo Client 등이 애플리케이션 캐싱을 제공합니다.

 

💬웹 캐시의 장단점

장점

• 웹페이지 로딩 속도 향상
• 네트워크 트래픽 절감
• 서버 부하 감소
• 사용자 경험(UX) 개선

단점

• 오래된 데이터 문제:
  캐시된 데이터가 업데이트되지 않아 최신 데이터가 표시되지 않을 수 있습니다.
• 디버깅 어려움:
  캐시된 데이터로 인해 변경 사항이 즉시 반영되지 않아 문제 원인을 찾기 어려울 수 있습니다.
• 스토리지 제한:
  브라우저 캐시의 저장 용량이 제한적이기 때문에 많은 데이터를 캐싱할 수 없습니다.

 

*브라우저 캐시와 React Query의 차이

 

 

참고

https://toss.tech/article/smart-web-service-cache