React 앱을 위한 엣지 캐싱 전략

Cache-Control 응답 헤더는 클라우드플레어와 다른 CDN이 SSR 응답을 얼마나 오래 캐시할지 제어합니다. 주요 지시어는 max-age(브라우저 캐시 기간), s-maxage(CDN 및 공유 캐시 기간), stale-while-revalidate(백그라운드에서 재검증하는 동안 오래된 콘텐츠 제공)입니다.

s-maxage는 공유 캐시(CDN)에서 적용되고 max-age는 브라우저 캐시에 적용됩니다. SSR 페이지에서는 일반적으로 s-maxage=60(CDN이 60초 동안 캐시)과 max-age=0(브라우저가 항상 재검증)을 사용하여 모든 사용자가 엣지 캐시에서 충분히 최신인 콘텐츠를 받도록 합니다.

Cache-Control 헤더에 stale-while-revalidate=30을 추가하면 클라우드플레어가 캐시된 페이지를 즉시 제공하는 동시에 백그라운드에서 최신 버전을 가져옵니다. 사용자는 항상 빠른 응답을 받고, 최대 오래됨의 기간은 s-maxage + stale-while-revalidate초입니다.

사용자 세션이나 로캘에 따라 달라지는 개인화된 콘텐츠는 공유 캐시에서 다른 사용자에게 제공되어서는 안 됩니다. Vary: Cookie 헤더는 클라우드플레어가 서로 다른 각 Cookie 값을 별도의 캐시 항목으로 취급하도록 하여 한 사용자의 데이터가 다른 사용자에게 제공되는 일을 방지합니다.

일반적인 패턴은 캐시 사용 여부를 결정하기 전에 워커에서 세션 쿠키를 확인하는 것입니다. 세션 쿠키가 있으면 캐시를 완전히 우회하고 개인화된 응답을 렌더링합니다. 세션 쿠키가 없으면 페이지는 공개 페이지이므로 캐시에서 제공할 수 있습니다.

클라우드플레어 KV는 사용자와 가까운 곳에 데이터를 저장하는 전 세계 분산 키-값 저장소입니다. 렌더링된 HTML을 KV에 캐시할 수 있습니다. 렌더링된 페이지를 TTL과 함께 값으로 저장하면 이후 요청에서는 리액트로 다시 렌더링하는 대신 엣지의 KV에서 읽어 올 수 있습니다.

KV 읽기가 빠른 이유는 요청을 처리하는 엣지 PoP에 데이터가 복제되기 때문이며, 일반적인 읽기 지연 시간은 5ms 미만입니다. 반면 KV 쓰기에는 최종 일관성이 적용됩니다. 한 리전에 기록한 내용이 60초 이내에 전 세계 모든 PoP로 전파되므로 일부 사용자는 잠시 오래된 데이터를 볼 수 있습니다.

클라우드플레어 R2는 송신 요금이 없는 S3 호환 객체 저장소 서비스입니다. KV에 저장하기에는 큰 자산에 적합합니다. 예를 들어 WASM 모듈, 미리 렌더링된 OG 이미지, 대규모 JSON 데이터 세트에 사용할 수 있습니다. 워커는 KV와 마찬가지로 바인딩을 통해 R2에 액세스합니다.

클라우드플레어 Enterprise는 캐시 태그를 지원합니다. 응답에 Cache-Tag: product-42를 지정하고 제품 42가 변경되면 클라우드플레어의 API를 호출하여 product-42 태그가 지정된 모든 응답을 제거할 수 있습니다. 이를 통해 전체 캐시를 제거하지 않고도 필요한 항목만 정밀하게 무효화할 수 있습니다.

새 버전의 워커를 배포하면 기존에 캐시된 HTML이 이전 JS 번들 파일 이름을 참조할 수 있습니다. 견고한 전략은 배포 버전을 캐시 키에 포함하거나, Vite의 콘텐츠 해싱을 사용한 버전이 지정된 번들 파일 이름을 사용하는 것입니다. 그러면 이전 HTML도 항상 유효하고 캐시된 JS 파일을 참조합니다.

SSR HTML을 KV에 캐시하는 워커는 다음 패턴을 따릅니다. URL에서 캐시 키를 계산하고(필요한 경우 로캘도 포함), KV에서 적중 여부를 확인한 다음, 적중하면 캐시된 HTML을 즉시 반환합니다. 미적중이면 리액트로 렌더링하고 결과를 TTL과 함께 KV에 저장한 후 새로 렌더링한 HTML을 반환합니다.

리액트 앱의 엣지 캐싱에는 여러 전략이 함께 사용됩니다. 공개 페이지를 CDN에 캐시하기 위한 Cache-Control s-maxage, 개인화된 응답이 공유되지 않도록 하는 Vary: Cookie, 렌더링된 HTML을 엣지에 캐시하는 KV, 세밀한 무효화를 위한 캐시 태그가 그 예입니다. KV의 최종 일관성 모델에서는 쓰기 전파에 최대 60초가 걸리므로 이에 맞춰 TTL과 무효화 전략을 설계해야 합니다.