stale-while-revalidate Cache-Control extension
๐Ÿ“„

stale-while-revalidate Cache-Control extension

Created
May 18, 2021 01:16 PM
Tags
ux
swr
http
ย 
(1)
๋งŒ์•ฝ ํ•˜๋ฃจ ์ฃผ๊ธฐ๋กœ ์—…๋ฐ์ดํŠธ๋˜๋Š” ๋‰ด์Šค ํ—ค๋“œ๋ผ์ธ ๋ฐ์ดํ„ฐ๋ฅผ ๋ Œ๋”๋งํ•˜๊ธฐ ์œ„ํ•ด
์„œ๋ฒ„์—์„œ ์ด๋ฅผ Fetching ํ•ด์•ผ ํ•œ๋‹ค๋ฉด... ์–ด๋–ค ๋ฐฉ๋ฒ•์„ ์ด์šฉํ•˜๋Š” ๊ฒƒ์ด ์ข‹์„๊นŒ?
ย 
  • ์–ด์ฐจํ”ผ ํ—ค๋“œ๋ผ์ธ ๊ฑฐ ๋ฐ์ดํ„ฐ ์–ผ๋งˆ ํฌ์ง€ ์•Š์„ํ…Œ๋‹ˆ ๋ฐฉ๋ฌธ ์‹œ๋งˆ๋‹ค Fetch ํ•˜์‡ผ
  • Service worker๋ฅผ ์ด์šฉํ•ด fetch ํ›„ํ‚นํ•œ ๋’ค, Cache storage๋กœ ์บ์‹ฑ? (๋งํฌ)
  • stale-while-revalidate Cache-Control extension?
ย 
๊ฐœ์ธ์ ์œผ๋กœ๋Š” ์„ธ ๋ฒˆ์งธ ๋ฐฉ๋ฒ•์ด ๊ฐ€์žฅ ์ ์ ˆํ•˜๋‹ค ํŒ๋‹จํ•œ๋‹ค
ย 
ย 
(2)
๋จผ์ € ์ฒซ ๋ฒˆ์งธ ๋ฐฉ๋ฒ•์˜ ๊ฒฝ์šฐ, ๋‹ค์Œ์˜ ํ—›์ ์ด ์žˆ๋‹ค
ย 
  1. ํ—ค๋“œ๋ผ์ธ ๋ฐ์ดํ„ฐ๊ฐ€ ํ•ญ์ƒ ์ž‘์•„์•ผ ํ•œ๋‹ค๋Š” ๊ฐ€์ •์ด ํ•„์š”
  1. ์•ˆ์ •์ ์ด๊ณ  ๋น ๋ฅธ ๋„คํŠธ์›Œํฌ๊ฐ€ ํ•ญ์ƒ ๊ตฌ์„ฑ๋˜์–ด ์žˆ์–ด์•ผ ํ•จ
ย 
๋‘ ๋ฒˆ์งธ ๋ฐฉ๋ฒ•์˜ ๊ฒฝ์šฐ, ๋‹ค์Œ์˜ ๋ถˆํŽธํ•จ์ด ์žˆ๋‹ค.
ย 
  1. ๊ตณ์ด Service worker๋ฅผ ๊ตฌ์„ฑํ•ด์ค˜์•ผ ํ•จ
  1. Cachingํ•  ๋ฐ์ดํ„ฐ๋ฅผ Specificํ•˜๊ฒŒ ์ง€์ •ํ•ด์ค˜์•ผ๋งŒ ํ•จ
ย 
ย 
(3)
stale-while-revalidate๋Š” RFC 5861์— ์ •์˜๋œ Cache-Control Extension์ธ๋ฐ
๊ทธ๋ƒฅ ๋‹ค์Œ๊ณผ ๊ฐ™์ด Cache-Control ํ—ค๋”๋ฅผ ์ง€์ •ํ•ด์ฃผ๋ฉด ๋ธŒ๋ผ์šฐ์ €์—์„œ ์•Œ์•„์„œ ์บ์‹œ๋ฅผ ๊ด€๋ฆฌํ•ด์ค€๋‹ค
ย 
Cache-Control: max-age=1, stale-while-revalidate=59
ย 
  • Respond data๋Š” 1s ๊นŒ์ง€ Fresh โ‡’ ์บ์‹œ๋œ ๋ฐ์ดํ„ฐ๋ฅผ ์ด์šฉ
  • 1s ~ 60s ๋ฒ”์œ„์—์„œ๋Š” Cache๋œ ๋ฐ์ดํ„ฐ๋ฅผ ์ผ๋‹จ ์ œ๊ณตํ•œ ํ›„, ๋ธŒ๋ผ์šฐ์ €์—์„œ Fetching์„ ํ†ตํ•ด Stale ์—ฌ๋ถ€ ์ฒดํฌ โ‡’ Staleํ•˜๋‹ค๋ฉด? 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 & Updating & Caching
  • 660s ์ดํ›„๋ถ€ํ„ฐ๋Š” ๋ฌด์กฐ๊ฑด Fetching ๋ฐ Caching
ย 
ย 
(5)
์ด๋ ‡๊ฒŒ stale-while-revalidate extension์„ ์ด์šฉํ•˜๋ฉด ๊ฐ„๋‹จํžˆ ๋ฐ์ดํ„ฐ๋ฅผ ์บ์‹ฑํ•  ์ˆ˜ ์žˆ๊ฒŒ ๋˜๊ธฐ์—
์ž˜ ์‚ฌ์šฉํ•ด๋ณด๋„๋ก ํ•˜์ž
ย 
๋ฌผ๋ก  ๋‹ค๋ฅธ ๋ฐฉ๋ฒ•์ด ๋” ํŽธํ•˜๋‹ค๋ฉด ๊ทธ๊ฑฐ ์“ฐ๊ณ ... ์–ด์ฐจํ”ผ ๋„๊ตฌ๋‹ˆ๊นŒ
ย 
ย 
(6)
ย 

Loading Comments...