S.W.R = Stale-While-Revalidate

Stale-While-Revalidate

클라이언트는 서버로부터 API를 통해 데이터를 받아온다.

데이터가 클라이언트에 한 번 전해진 이상, 클라이언트는 해당 데이터가 최신 데이터인지 더 이상 알 수가 없다.

이렇게 서버에서 클라이언트로 전해져 최신 데이터인지 알 수 없는, 즉 신선함을 잃은 데이터를 'stale response'라고 한다.

 

stale-while-revalidate는 '캐싱 전략'의 일종이다. (아직 비표준 단계의 HTTP Cache-Control)

데이터가 stale response인지 아닌지는 Cache-Control 헤더에 함께 포함된 max-age로 판단한다.

Cache-Control: max-age=600, stale-while-revalidate=30

캐싱된 데이터가 아직 최신 상태라면 해당 데이터를 그대로 응답해준다.

 

만약 데이터가 최신 상태가 아니라고(max-age보다 오래됐다고) 해도,

일단은 요청에 최대한 빠르게 응답하기 위해서 캐싱된 데이터를 응답으로 바로 보내준다.

하지만 그 사이에, 다음 클라이언트 요청이 올 것을 대비해 '재검증(revalidate)' 요청이 이루어진다.

이 때, 새로 가져온 데이터가 이전에 캐시된 데이터와 동일한지를 검증하여 아니라면 캐시를 갱신한다.

 

max-age 뿐만 아니라 stale-while-revalidate 값보다도 오래된 'truly' stale 데이터라면

stale-while-revalidate는 동작을 멈추고 (캐싱된 데이터를 사용하지 않고) 그냥 서버에 새로 요청을 보낸다.

 

즉시성과 최신성 사이의 균형을 맞추기 위해 고안된 방법이다.

 

SWR

stale-while-revalidate 전략을 클라이언트의 서버 상태(server state)에 적용한 프론트엔드 라이브러리. 

즉, 데이터 페칭(fetching)을 리액트 훅(hook)의 형태로 간단하게 사용할 수 있다는 장점도 있지만 주 용도는 캐싱이다.

 

일단 최신 데이터가 아니더라도 캐싱된 데이터를 먼저 사용자에게 보여준다. 

그리고 그 사이에 서버를 한 번 찔러서 재검증을 한다.

만약 받아온 데이터가 캐싱된 데이터와 다를 경우, 리렌더링을 통해 새로운 데이터를 사용자에게 보여준다.

간단히 말해, 재검증을 하는 동안 사용자에게 캐시 데이터를 먼저 보여주는 방식이라고 생각하면 된다.

 

useSWR이라는 hook이 핵심이며 반환값으로 { data, error, isValidating, mutate }를 받을 수 있다.

const { data, error, isValidating, mutate } = useSWR(key, fetcher, options);

아직 데이터를 로딩중일 때는 data가 undefined이고, 데이터를 가져오면 해당 데이터가 반환된다.

error는 undefined이다가 에러가 발생하는 경우에만 해당 에러를 반환한다.

isValidating은 revalidate 중인지 여부를 나타내는 boolean 값이다.

mutate는 인위적으로 revalidate를 시킬 때 사용한다.

 

이 밖에도 infinite scroll 기능이나 실패 시 retry 등 여러 부가 기능들이 SWR에 붙어있다.

생각보다 default로 활성화되어있는 기능들이 많고, 그것들을 옵션으로 비활성화시킬 수도 있다.

 

---

여담으로, Google Workbox의 문서를 보면 걔네들은 stale-while-revalidate 말고도 

 

- Cache-First: 캐싱된 데이터가 존재한다면 요청에 대한 응답은 무조건 캐시에서 보낸다.

만약 캐싱된 데이터가 존재하지 않는다면 API 요청을 보내 응답한다.

그리고 해당 응답은 캐싱되어, 다음 요청이 오면 캐시에서 응답을 보내게 된다.

 

- Network-First: 기본적으로 항상 API로 최신 데이터를 가져온다.

성공적으로 요청이 응답되면, 해당 응답을 캐싱해놓는다.

만약 요청이 실패하면 캐싱된 데이터가 보내진다.

 

- Network-Only: 캐시를 사용하지 않고 무조건 API를 찌른다.

 

- Cache-Only: 무조건 캐시에서만 데이터를 가져온다.

 

같은 다양한 캐싱 전략들을 사용한다고 함.

RFC 5861 문서를 보면 stale-while-revalidate와 함께 제안된 Cache-Control 헤더 중에 stale-if-error같은 것도 있다.

그냥 한 번씩 눈에 슥- 담아두면 좋을 것 같아서.

 

 

출처

Google Developers workbox strategies - https://developers.google.com/web/tools/workbox/modules/workbox-strategies#cache_only

RFC 5861 - https://datatracker.ietf.org/doc/html/rfc5861#section-4

web.dev stale-while-revalidate로 최신 상태 유지 - https://web.dev/i18n/ko/stale-while-revalidate/

Cache-Control MDN - https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cache-Control