Error

---

Flask 디버그 모드에서 개발 시에 Static File 들에 대한 캐시 제거가 유용할 때가 많다.

예를 들어, 아래와 같이 index.html 의 style.css 파일을 수정하였다고 가정해보자.

h1 {
	color: red;
}

이후, Flask 의 디버그 모드에서 새로고침을 수행하면 수정한 내용이 곧바로 적용될까?

결과는 그렇지 않았다.

받아온 style.css 파일을 확인하면, 아직 코드가 추가되기 이전의 빈 파일을 불러오고 있다는 것을 쉽게 알 수 있다.

그 원인은 사실 캐시에 있다.

개발자 도구로 style.css 파일에 대한 request/response 를 열어보면 아래와 같이 캐시를 사용하고 있음을 알 수 있으며,

response 헤더의 Cache-Control 이 max-age=43200 으로 설정되어 있음을 확인할 수 있다.

즉, Cache-Control 의 max-age 가 43200(=12시간)으로 설정되어 있어, 캐시에 저장된 style.css 파일을 계속해서 사용하고 있기 때문에 수정한 내용이 곧바로 적용되지 않는 것이다.

이러한 경우, 웹페이지 새로고침 시에 Ctrl+Shift+F5 나 Shift+F5 와 같은 Hard Reload 를 사용하여 모든 Static File 들을 새롭게 다운받아주어야만 수정한 내용을 곧바로 확인할 수 있다.

하지만 이는 개발 시 굉장히 번거롭고 신경쓰이는 일이다.

Solution

---

💡 SEND_FILE_MAX_AGE_DEFAULT

Flask 에서 기본적으로 제공하는 설정값인 SEND_FILE_MAX_AGE_DEFAULT 를 활용하면 손쉽게 캐시를 제거하고 모든 Static File 들을 새롭게 다운받아올 수 있다.

📌 Flask Docs: send_file_max_age_default
When serving files, set the cache control max age to this number of seconds. Can be a datetime.timedelta or an int.

Ref: Flask-Docs/config/send_file_max_age_default

FLASK_APP 의 __init__.py 로 이동하여 아래의 로직을 추가해보자.

if app.config['DEBUG']:
	app.config['SEND_FILE_MAX_AGE_DEFAULT'] = 1

위 코드는 디버그 모드 시, 브라우저의 캐시 유지를 1초로 변경한다는 의미이다.
따라서, max-age 는 1 이 되고 수정한 내용을 곧바로 브라우저에서 확인할 수 있을 것이다.

이렇게, 수정한 Static File 은 Normal Load 만으로도 브라우저에서 확인이 가능해졌다.
다시 말해, 더이상 귀찮은 Ctrl+Shift+F5 를 누르지 않고도 자동으로 새로운 파일을 다운로드받아 화면에 랜더링할 수 있게 되었다.

++
2.0.x 이상 버전의 Flask Docs 를 살펴보면, SEND_FILE_MAX_AGE_DEFAULT 의 기본값이 43200 에서 None 으로 변경되었음을 알 수 있다.

이는 시간을 지정하는 대신, Cache-Control 의 속성을 no-cache 로 지정한다는 의미이다.

no-cache 는 조건부 요청 으로, 캐시를 사용할 수는 있지만 항상 Origin Server 에 검증을 받아야 함을 의미한다.

즉, 캐시를 사용하기에 앞서 Origin Server 에게 현재 캐시가 유효한지를 항상 검증하여야 한다는 것이다.

따라서, 2.0.x 버전 이상부터는 기본값인 None 을 사용하더라도 조건부 요청에 의해 수정된 Static File 의 변경 내용이 곧바로 브라우저에 의해 랜더링된다.