stale-while-revalidate이란 ?
stale-while-revalidate를 사용하면 캐싱된 콘텐츠를 바로 확인하고, fresh하게 유지할 수 있습니다.
stale-while-revalidate 는 크롬 75, 파이어폭스 68에서 지원되며, 지원이 안되는 경우 해당 부분은 무시됩니다.
stale-while-revalidate는 두 부분으로 나눌 수 있습니다.
- 캐시된 응답이 stale할 수 있다.
- 재검증 프로세스
브라우저는 캐시된 응답이 'stale'한 것을 어떻게 알까요?
Cache-Control 응답 해더는 max-age 를 포함해서 언제 stale하게 되는지를 포함해야 합니다. 해당 max-age보다 최신 응답이면 fresh, 아니면 stale한 것입니다.
캐싱 응답이 fresh인 경우에는 할일이 없지만, stale인 경우라면 또 다른 age 체크가 수행됩니다. 이렇게요 => stale-while-revalidate으로 설정한 추가 시간 내에 캐시 응답이 있나요?
만일, stale 응답이 해당 시간 내에 떨어지면, 브라우저 요청이 이뤄진 것으로 간주되고, 동시에 캐시 응답 사용을 지연시키지 않는 네트워크를 통해서 "재확인" 요청이 이루어집니다. 응답은 이전 캐시 응답과 동일할 수도 있고 다를 수도 있습니다. 두 경우 모두, 네트워크 응답은 로컬로 저장이 되어 이전의 캐시 응답을 대체하고, 이후에 있을 max-age 동안에 사용되는 'fresh한 타이머'를 재설정합니다.
하지만 stale 응답이 너무 오래되어 stale-while-revalidate 시간을 벗어나 버리면, 브라우저 요청이 이뤄지지 않은 것으로 간주될 것이고, 브라우저는 네트워크 응답을 다시 받아서, 초기 요청 수행 + fresh 응답으로 로컬 캐시 생성을 할 것입니다.
언제 사용할까요?
refresh 되어야 하는 정보를 제공하는 서비스지만, 조금 stale해도 되는 경우에 사용합니다.
stale-while-revalidate와 max-age를 같이 사용하면 네트워크 응답을 block 하지않고, 캐시에서 최신 콘텐츠로 추후 요청이 이뤄질 가능성이 높아집니다.
Server State, UI State
모든 타입의 상태는 다음 2가지로 나눌 수 있습니다.
-
Server Cache - 서버에 실제로 저장되어 있는 상태로, 빨리 접근하기 위해(사용자 데이터처럼) 클라언트에 저장합니다.
-
UI State - UI에서만 유용한 상태로, 앱에서 interactive한 부분을 제어하는 상태입니다.
이 2가지를 혼재하여 쓰게되면 실수가 발생합니다. 서버 캐시의 경우 UI 상태와는 처음부터 다른 성격을 띄고 있기 때문에 다르게 다루어져야 합니다. 내가 다루고 있는 것이 상태가 아니라 state 상태의 캐시a cache of state 라는 것을 받아들인다면, 제대로 생각하고 관리하고 있는 것입니다.
출처
https://web.dev/stale-while-revalidate/
https://kentcdodds.com/blog/application-state-management-with-react
