stale-while-revalidate
SWR의 유래부터 알아보자. 웹에서 리소스를 요청하게 되면 서버에서 리소스를 가져온다.
근데 이 가져온다는 행위 자체가 돈이 든다. 하지만 그럼에도 불구하고 우리는 최신 데이터를 유지하고 싶어한다.
이를 해소하기 위해서 캐싱을 한다. 한번 가져온 데이터를 key-value형식이든 특정 데이터로 저장하고 있다가, 동일한 요청을 하면 다시 요청하는 것이 아닌 가지고 있던 캐시 데이터에서 값을 넘겨주는 것이다. 물론 너무 오랜시간 저장된 데이터는 최신화가 되지않았을 것이기에 일정 시간을 주기로 캐시 데이터를 최신 데이터로 바꿔준다.
이런 전략을 HTTP에서 활용한 것이 HTTP Cache-Control의 stale-while-revalidate이다.
그렇다면, 이 전략으로 API를 요청하는 React Componenet에 적용할 수 있으면 좋을 것 같다는 생각이 든다.
그게 SWR이라 보면 되겠다.
useSWR이라는 hook을 사용하여 API를 호출하고, 특정 시간 이전의 요청은 캐시데이터로 처리, 시간이 지난 데이터는 먼저 캐시 데이터를 보여준 후 다시 API를 호출하여 새로운 데이터로 변경해준다.
출처
https://velog.io/@rieulp/stale-while-revalidate
stale-while-revalidate이란?
stale-while-revalidate 전략으로 서버 상태 관리하기
velog.io