클라이언트 단 캐시 (Client-side Caching)

지난 포스트에 이어, 웹 애플리케이션에서 사용되는 캐싱 기법 중 클라이언트 단 캐시(Client-side Caching)에 대해 다룹니다.

 

클라이언트 단 캐시는 브라우저 측에서 데이터를 저장하는 것을 의미합니다. 이는 웹 페이지가 로드될 때, 자주 변경되지 않는 정적인 리소스들을 로컬 디스크나 메모리에 캐싱해두고, 이후 페이지가 로드될 때 해당 리소스를 서버에서 가져오는 것이 아니라 로컬에서 불러올 수 있도록 하는 것입니다. 이렇게 함으로써 브라우저는 서버에 새로운 요청을 보내지 않아도 되므로, 웹 페이지의 로딩 속도를 향상시키는 효과를 볼 수 있습니다.

 

캐시 제어에 사용되는 HTTP 헤더

클라이언트 단 캐시는 HTTP 헤더를 통해 제어할 수 있습니다. 서버는 응답 헤더에 Cache-Control, Expires, Last-Modified, ETag 등의 정보를 담아서 클라이언트 측에서 캐싱할 수 있는 정보를 제공합니다. 이러한 헤더를 이용하여 클라이언트 측에서 캐시를 관리하는 방법은 아래와 같습니다.

 

Cache-Control

Cache-Control 헤더를 이용하여 캐시를 제어할 수 있습니다.

max-age 지시자를 이용하여 캐시의 유효 시간을 설정할 수 있습니다.

no-cache 지시자를 이용하여 캐시를 사용하지 않도록 설정할 수 있습니다.

 

Expires

Expires 헤더를 이용하여 캐시의 만료 시간을 설정할 수 있습니다.

만료 시간이 지나면 브라우저는 새로운 요청을 보내서 데이터를 다시 가져옵니다.

 

Last-Modified

Last-Modified 헤더를 이용하여 서버에서 마지막으로 수정된 시간을 전송합니다.

클라이언트는 다음 요청 시 If-Modified-Since 헤더를 이용하여 마지막으로 수정된 시간을 전송합니다.

서버는 If-Modified-Since 헤더에 전송된 시간과 현재 리소스의 수정 시간을 비교하여 변경 여부를 판단합니다.

 

ETag

ETag 헤더를 이용하여 리소스의 버전 정보를 전송합니다.

클라이언트는 다음 요청 시 If-None-Match 헤더를 이용하여 ETag 값을 전송합니다.

서버는 If-None-Match 헤더에 전송된 ETag 값과 현재 리소스의 ETag 값을 비교하여 변경 여부를 판단합니다.

 

클라이언트 단 캐시의 효과 및 한계

클라이언트 단 캐시는 웹 페이지의 로딩 속도를 향상시키는데 큰 역할을 합니다. 자주 변경되지 않는 정적인 리소스들을 로컬에 캐싱함으로써, 브라우저는 서버에 새로운 요청을 보내지 않아도 되므로, 웹 페이지의 로딩 속도를 향상시키는 효과를 볼 수 있습니다.

 

하지만 클라이언트 단 캐시에는 몇 가지 한계도 존재합니다. 캐시가 만료되었거나 변경된 경우에도 클라이언트는 그 사실을 인지하지 못하고 캐시된 데이터를 계속 사용할 수 있습니다. 이러한 문제를 해결하기 위해 서버 단 캐시와 마찬가지로 적절한 캐시 제어 헤더를 설정해야 합니다.

 

또한, 클라이언트 단 캐시는 클라이언트 측에서 관리되므로, 사용자가 다른 브라우저나 기기에서 웹 페이지를 접속할 경우, 캐시된 데이터가 다르게 표시될 수 있습니다. 이러한 문제를 해결하기 위해서는 서버 측에서도 적절한 캐시 제어를 해야 합니다.

 

마지막으로, 클라이언트 단 캐시는 브라우저의 캐시 설정에 따라 캐시가 동작하므로, 사용자가 캐시 설정을 변경할 경우에도 이에 따른 영향이 발생할 수 있습니다. 따라서 웹 개발자는 이러한 사용자 측의 설정에 대한 고려를 해야 합니다.