stale-while-revalidate Cache-Control extension으로 UX 향상해보기

안녕하세요. 프로젝트 진행하며 공부했던 것을 공유합니다.

(1)

만약 하루 주기로 업데이트되는 뉴스 헤드라인 데이터를 렌더링하기 위해 서버에서 이를 Fetching해야 한다면... 어떤 방법이 좋을까요?

- 어차피 뉴스 헤드라인 데이터 얼마 크지 않을테니 방문 시마다 Fetch

- Service Worker를 이용해 Fetch 후킹 후 Cache Storage로 캐싱 (링크)

- stale-while-revalidate Cache-Control extension을 이용

개인적으로는... 세 번째 방법이 가장 적절하다 판단합니다.

(2)

먼저 첫 번째 방법의 경우, 다음의 헛점이 존재합니다.

1. 헤드라인 데이터가 항상 작아야 한다는 가정이 필요

2. 안정적이고 빠른 네트워크가 항상 구성되어 있어야 함

두 번째 방법의 경우, 다음의 불편함이 있습니다.

1. 굳이 Service Worker를 구성해줘야만 함

2. Caching할 데이터를 Specific하게 지정해줘야만 함

(3)

stale-while-revalidate는 RFC 5861에 정의된 Cache-Control HTTP Header의 Extension인데, 쉽게 말하면 그냥 다음과 같이 Cache-Control 헤더를 지정해주면 브라우저에서 알아서 캐시를 관리해주는 기법입니다.

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

- Respond date는 1s 까지 Fresh => 캐시된 데이터를 이용

- 1s ~ 60s 범위에서는 Cache된 데이터를 일단 제공한 후, 브라우저에서 Fetching을 통해 Stale(Unfresh) 여부 체크 => Stale 하다면 Fetched된 데이터를 이용해 Update 및 이를 Caching (브라우저에서 진행)

- 60s 이후부터는 무조건 Fetching해 새로운 데이터를 받아옴 => 이후 이를 Caching

이런 방식으로 캐시를 관리해주기에, 좀 더 나은 UX를 구성할 수 있습니다.

(4)

하나 더 예시를 들어보겠습니다.

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

- Respond data는 600s 까지 Fresh => 캐시된 데이터를 이용

- 600s ~ 660s 범위에서는 Cache data 제공 후 Stale 여부 체크 => Stale하다면 Fetching 후 Update 및 Caching

- 660s 이후부터는 무조건 Fetching 및 Caching

(5)

이렇게 stale-while-revalidate extension을 이용하면 간단히 데이터를 캐싱할 수 있게 됩니다.

그렇다고 이 방법이 정답이라는 말은 아니에요.

항상 상황에 맞춰서 원하시는 방법으로 구현하시면 됩니다.

그냥 이런 방법도 있다는 정도로만 알아두셔도 좋을 것 같아요.

(0)

읽어주셔서 감사합니다 (ﾉ◕ヮ◕)ﾉ*:･ﾟ✧

---

- Service Worker를 이용한 Assets Caching : https://okky.kr/article/977035

- JavaScript로 Web Components 구현하기 : https://okky.kr/article/977318

- stale-while-revalidate Cache-Control extension으로 UX 향상해보기 : https://okky.kr/article/978951