stale-while-revalidate Cache-Control extension

• 어차피 헤드라인 거 데이터 얼마 크지 않을테니 방문 시마다 Fetch 하쇼

• Service worker를 이용해 fetch 후킹한 뒤, Cache storage로 캐싱? (링크)

• stale-while-revalidate Cache-Control extension?

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

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

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

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

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

• Respond data는 1s 까지 Fresh ⇒ 캐시된 데이터를 이용

• 1s ~ 60s 범위에서는 Cache된 데이터를 일단 제공한 후, 브라우저에서 Fetching을 통해 Stale 여부 체크 ⇒ Stale하다면? Update & Caching

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

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

• Respond data는 600s 까지 Fresh ⇒ 캐시된 데이터를 이용

• 600s ~ 660s 범위에서는 Cache data 제공 후 Stale 여부 체크 ⇒ Stale하다면? Fetching & Updating & Caching

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

• 실제 동작하는 예시: https://glitch.com/edit/#!/s-w-r-demo

• 참고: https://web.dev/stale-while-revalidate/

• rfc: https://tools.ietf.org/html/rfc5861