stale-while-revalidate 전략에 대해 알아보기

시작하며

이번 원티드 프론트엔드 챌린지 과제는 React Query를 적용해보는 것이었다. 이전에 React Query를 사용해 본적이 없기에 React Query의 작동 원리와 사용하는 이유를 먼저 공부하기 시작하면서 알게된 stale-while-revalidate와 모호했던 캐싱이라는 개념에 대해 정리해보고자 한다.

 

캐싱(Caching)이란?

Stale-While-Revalidate 전략에는 캐싱이란 개념이 사용된다. 캐싱이란 데이터나 값을 미리 복사해 놓고 있다가 요청 시에 그것을 제공하는 기술을 의미한다. 캐시는 복사본을 저장하고 있는 임시 장소를 말한다. 웹 캐시 역시 자신의 저장소 내에 요청된 리소스를 갖고 있다면 요청을 가로채 서버로 요청이 전달되는 것을 막고, 리소스의 복사본을 반환한다.

캐싱을 사용한다면 다음과 같은 이점이 있다.

• 모든 클라이언트 요청을 서버가 처리할 필요가 없어져 서버의 부하가 줄어든다.
• 클라이언트 입장에서 캐시가 서버에 비해 가까이 있으므로 성능이 향상된다. 즉, 요청을 가로채 캐시에 저장된 정보를 불러오므로 응답속도가 빠르다.

 

Stale-While-Revalidate 전략이란?

• 캐싱된 콘텐츠를 즉시 로드하는 즉시성과 미래에 사용될 캐싱된 콘텐츠의 업데이트가 나중에 사용될 것을 보장하는 이 두가지를 챙긴 전략이다.

💡 여기서 말하는 콘텐츠란?
     서버로 부터 받은 응답을 의미한다.

stale한 데이터와 revalidation(재검증)

❓ stale한 데이터는 어떤 데이터를 말하는 것일까?

stale의 사전적 의미는 ‘신선하지 않은’ 을 의미한다. 따라서, stale한 데이터는 신선하지 않은 데이터, 즉 최신화가 필요한 데이터를 말한다.

 

❓ 그렇다면 브라우저는 캐싱된 컨텐츠가 stale한 상태인지 어떻게 판단할까?

HTTP 헤더 필드 중 하나인 Cache-Control은 캐싱 메커니즘을 정의한다. Cache-Control 은 확장 기능으로 stale-while-revalidate=<seconds>를 제공한다. (이 기능은 Chrome 75이상, FireFox 68이상에서 지원한다고 한다.) Cache-Control이 stale-while-revalidate를 포함하고 있다면 max-age 값도 함께 가지고 있다. 브라우저는 max-age를 통해 캐싱된 콘텐츠의 최신 상태 여부를 판단한다.

 

max-age를 이용해 최신 상태를 어떻게 판단하는지 예시를 들어보자.

(HTTP 응답 헤더는 다음과 같다.)

Cache-Control: max-age=1, stale-while-revalidate=59

1. max-age로 설정한 유효시간 동안은 캐싱된 데이터를 fresh한 데이터로 판단한다.
2. 만약, 응답을 받은지 1초(max-age) 이내에 HTTP 요청이 또 발생한다면 유효성 검증 없이 캐싱된 콘텐츠를 반환한다.
3. max-age ~ swr 사이에 HTTP 요청이 또 발생한다면 캐싱된 데이터를 stale한 데이터로 판단하지만 이를 추가적인 HTTP 요청 대신에 사용한다.
4. 만약, 1 ~ 60초(max-age ~ swr) 사이에 HTTP 요청이 또 발생한다면 우선 캐싱된 콘텐츠를 반환한다. 이때의 캐싱된 콘텐츠는 최신화가 필요한 상태이다. 따라서, 캐싱된 콘텐츠를 반환하는 동시에 재검증(revalidation)을 요청하여 캐싱된 콘텐츠를 새로운 콘텐츠로 교체한다.
5. swr에 설정된 시간 이후에는 stale한 데이터는 사용할 수 없게 되고, HTTP 요청이 서버로 전달되어 새로운 응답 데이터를 반환받는다.

 

stale-while-revalidate 전략을 사용한 데이터 패칭 도구

stale-while-revalidate 전략을 이용한 데이터 패칭 도구에는 React-Query, SWR이 있다.

이러한 패칭 도구들은 정리한 캐싱과 연관지어 네트워크 측면에서 생각해봤을때, 이러한 패칭 도구들을 사용하면 캐싱된 데이터가 있으면 서버에 응답을 기다릴 필요가 없기 때문에 필요한 데이터를 받아오는 속도를 빠르게 개선시킬 수 있을 것 같다.

 

마치면서

stale-while-revalidate 전략에 대해 알아보며 swr 전략을 기반으로 구현된 React Query가 가진 장점과 사용하는 이유에 대해 조금은 깨닫게 되었다. 다음에는 React Query에 어떤 기능들이 있는지 알아보며 React Query를 사용하게 된 이유에 대해 공부해봐야겠다.