cache 공부를 하면서 부가적으로 알게된 SWR 전략에 대해 정리해보자
swr 캐싱된 리소스를 즉각적으로 보여주면서, 갱신된 데이터의 최신성 까지 보장하기위한 전략이다.
stale-while-revalidate헤더는 max-age와 Cache-Control 헤더에 사용.
max-age: 캐싱된 데이터의 재검증요청을 날리는 기준 (max-age가 넘으면 재검증)stale-while-revalidate: 지정된 시간내에 요청이 반복되면 캐싱된 데이터를 보여주고, 재검증 요청을 날린뒤 신선한 데이터가 오면 이를 반환한다.
예시
// HTTP Response Cache-Control Header
Cache-Control: max-age=1, stale-while-revalidate=59- 0~1초 : max-age 미만이므로, 캐싱된 데이터를 반환
- 1~60초 : 시간내에 요청이 반복되는경우 오래된 캐싱데이터를 우선 반환한다. 동시에 재검증 요청을 보낸뒤 최신응답데이터가 반환되면 이를 다시 반환한다
- 60초 ~ : 캐싱된 데이터를 사용하지않음
react-query , swr
위와같은 stale-while-revalidate 헤더 전략을 사용하여 동작하는 라이브러리.
캐싱된 데이터를 보여주면서, 검증된 최신의 데이터를 백그라운드에서 요청하여 즉시성과 데이터의 최신성을 동시에 보장해준다.
프론트엔드개발