브라우저 캐싱은 웹 애플리케이션의 성능을 향상시키기 위해 중요한 역할을 합니다. SSR(Server-Side Rendering)을 사용하는 웹 애플리케이션에서도 브라우저 캐싱을 효과적으로 제어할 수 있습니다.
1. 캐싱 제어 헤더 설정
SSR을 사용하는 웹 애플리케이션에서는 서버에서 응답하는 HTML 페이지에 캐싱 제어 헤더를 설정함으로써 브라우저의 캐싱 동작을 제어할 수 있습니다. 캐싱 제어 헤더는 Cache-Control과 Expires 헤더를 사용하여 설정할 수 있습니다.
Cache-Control
Cache-Control 헤더는 서버 응답을 캐시할 수 있는 시간을 정의합니다. 예를 들어, 다음과 같이 max-age 값을 설정하여 응답이 1시간 동안 캐시될 수 있도록 설정할 수 있습니다.
Cache-Control: public, max-age=3600
Expires
Expires 헤더는 캐시의 만료 시간을 정의합니다. 예를 들어, 다음과 같이 Thu, 30 Dec 2021 12:00:00 GMT 값으로 설정하여 응답이 해당 시간 이후에 만료되도록 설정할 수 있습니다.
Expires: Thu, 30 Dec 2021 12:00:00 GMT
2. 캐시 제어 옵션 설정
SSR을 사용하는 웹 애플리케이션에서는 화면의 동적인 변화에 따라 캐싱을 제어해야 할 때도 있습니다. 이를 위해 다음과 같은 캐시 제어 옵션을 설정할 수 있습니다.
No-Cache
No-Cache는 브라우저가 캐시를 사용하지 않고 서버로부터 항상 새로운 리소스를 가져와야 함을 나타냅니다. 아래의 헤더를 이용하여 No-Cache를 설정할 수 있습니다.
Cache-Control: no-cache
No-Store
No-Store는 브라우저가 캐시를 저장하지 않아야 함을 나타냅니다. 아래의 헤더를 이용하여 No-Store를 설정할 수 있습니다.
Cache-Control: no-store
3. 쿼리 스트링 활용
캐시 제어 헤더를 통해 브라우저 캐싱을 제어할 수 있지만, 쿼리 스트링을 활용하여 동적으로 리소스를 변경하면서 캐싱을 우회할 수도 있습니다. 예를 들어, 다음과 같이 쿼리 스트링을 이용하여 리소스의 버전을 지정할 수 있습니다.
<link rel="stylesheet" href="/styles.css?ver=1.0"/>
위의 예시에서 ver=1.0은 스타일시트의 버전을 나타내며, 버전이 변경되면 브라우저는 캐시된 리소스를 무시하고 새로운 리소스를 다운로드합니다.
결론
SSR을 활용하는 웹 애플리케이션에서 브라우저 캐싱을 효과적으로 제어하기 위해서는 캐시 제어 헤더를 설정하고 캐시 제어 옵션을 활용하는 것이 중요합니다. 쿼리 스트링을 활용하여 리소스의 동적인 변경을 반영하면서 캐싱을 우회할 수도 있습니다. 이를 통해 웹 애플리케이션의 성능을 향상시킬 수 있습니다.
References: