CloudFlare - 정적 캐싱 vs 동적 캐싱

https://www.cloudflare.com/learning/cdn/caching-static-and-dynamic-content/

---

정적 컨텐츠 Static Content

• 서버에 저장되어 사용자에게 전달될 때마다 동일하게 유지되는 모든 파일
• HTML 파일과 이미지

 

동적 컨텐츠 Dynamic content

• 방문 시간, 위치, 디바이스 등 사용자 고유의 요인에 따라 변경되는 콘텐츠
• 동적 웹페이지는 모든 사람에게 동일하게 표시되지 않으며, 사용자가 웹페이지와 상호 작용할 때 변경
• 정적 HTML 파일로 저장 X
• 서버 측 스크립트가 사용자 상호 작용이나 사용자 로그인 등의 이벤트에 대한 응답으로 HTML 파일을 생성하고 웹 브라우저로 HTML 파일을 전송 👉캐시가 아닌 원본 서버에서 제공

정적 캐싱 

• 콘텐츠가 제공될 때 캐시가 정적 파일의 사본을 저장하여 사용자에게 더 가깝고 더 빠르게 전달
• 브라우저와 CDN은 정적 콘텐츠를 일정 기간 동안 캐싱하여 콘텐츠 요청이 계속되는 한 사용자에게 제공
• 정적 콘텐츠는 시간이 지나도 변경되지 않으므로 동일한 파일을 여러 번 사용자에게 전송할 수 있기 때문에 가능

동적 캐싱

• 동적 콘텐츠는 페이지의 콘텐츠를 변경하는 스크립트에 의해 생성
• 오리진 서버가 아닌 CDN 캐시에서 스크립트를 실행해서 캐시에서 동적 콘텐츠를 생성하고 전송 가능👉클라이언트 요청에 대한 응답 시간이 단축되고 동적 웹페이지의 속도가 빨라짐

동적 웹페이지 속도 향상 방법

 

1. 동적 콘텐츠 압축

• 원본 서버에서 생성된 동적 콘텐츠를 압축
• 콘텐츠는 여전히 캐시가 아닌 원본 서버에서 가져오지만 생성된 HTML 파일의 크기가 훨씬 작아져 클라이언트 디바이스에 더 빨리 도달

2. ESI(Edge Side Includes)

• 동적 웹 페이지의 특정 요소만 동적으로 유지 👉 HTML 코드가 중복
• 웹페이지에서 동적 콘텐츠가 표시되는 위치를 지정하는 마크업 언어인 ESI(Edge Side Includes)를 개발                (ESI는 일부 CDN에서 사용 중이지만 웹 표준을 관리하는 조직인 W3C에서는 아직 승인X)
• ESI 태그가 있는 콘텐츠는 다른 곳에서 가져오고 나머지 웹페이지의 콘텐츠는 캐시
• 각 사용자에 대해 전체 페이지를 생성해야 하는 경우보다 훨씬 더 빠르게 로드