정적 및 동적 콘텐츠 캐싱 | 작동 방식

정적 및 동적 콘텐츠의 차이

정적 콘텐츠는 서버에 저장되어 있으며 모든 사용자에게 동일하게 전달되는 파일을 모두 말합니다. HTML 파일 및 이미지는 이러한 콘텐츠의 예입니다. 정적인 콘텐츠는 신문과 같습니다. 일단 신문이 발행되고 나면 하루 중에 어떤 일이 일어나더라도 모든 사람이 계속 똑같은 기사와 사진을 보게 됩니다.

동적 콘텐츠는 방문 시간, 위치, 장치 등 사용자에 특정한 요인들에 따라 변경되는 콘텐츠를 말합니다. 동적 웹 페이지는 모든 사용자에게 동일하게 표시되지 않으며 사용자와의 상호작용에 따라 변경될 수 있습니다(보는 사람에 따라 신문 내용이 바뀐다고 생각하면 됩니다). 따라서 웹 페이지를 더욱 개인별로 맞춤화되고 대화형이 됩니다.

현대의 뉴스 웹사이트는 동적 콘텐츠의 좋은 예입니다. 신문과 달리, 기사가 하루 종일 업데이트되며 사이트 방문자의 위치 또는 로그인 상태에 따라 홈 페이지의 헤드라인이 달라질 수 있습니다. 소셜 미디어 페이지가 또 다른 예입니다. 페이스북 뉴스 피드는 사용자마다 완전히 다르게 보이고 사용자들은 콘텐츠와 상호작용(예를 들어, 게시물의 공유 또는 답글 등)으로 콘텐츠를 변경할 수 있습니다.

동적 웹 페이지는 정적 HTML 파일로 저장되지 않습니다. 대신, 서버 측 스크립트가 사용자 상호작용 또는 사용자 로그인 등의 이벤트에 대한 응답으로 HTML 파일을 생성하고 이를 웹 브라우저로 전송합니다. 동적 콘텐츠는 서버 측에서 생성되기 때문에 캐시가 아니라 원본 서버에서 제공되는 것이 일반적입니다.

이러한 동적 콘텐츠는 오랫동안 캐시할 수 없는 것으로 간주되었습니다. 하지만 새로운 기술을 이용하면 웹 사이트가 캐시에서 동적 콘텐츠를 제공할 수 있게 되어 사용자에게 대화식 환경을 제공하면서도 대기 시간 을 크게 줄일 수 있습니다.

정적 콘텐츠의 캐시 방법

일반적인 웹 캐시 프로세스는 콘텐츠를 제공할 때 캐시에 정적 파일의 사본(예: 이미지) 을 저장하여 다음에 동일한 내용을 제공할 때 사용자에게 더 가까운 곳에서 빠르게 전달하는 것입니다. 브라우저 및 콘텐츠 전송 네트워크(CDN)는 설정된 기간 동안 정적 콘텐츠를 캐시하고 콘텐츠가 계속 요청되면 이를 사용자에게 제공할 수 있습니다. 이는 시간이 지나도 정적 콘텐츠가 변경되지 않기 때문에 가능합니다. 즉, 동일한 파일을 사용자들에게 여러번 전달할 수 있습니다.

동적 콘텐츠 캐시의 작동 방식

동적 콘텐츠는 페이지의 콘텐츠를 작성하는 스크립트에 의해 생성됩니다. 멀리 떨어져 있는 서버가 아닌 CDN 캐시에서 스크립트를 실행함으로써 캐시에서 동적 콘텐츠를 생성하고 전송할 수 있습니다. 그러므로 동적 콘텐츠도 본질적으로 "캐싱된" 것이며 원본에서부터 제공할 필요가 없어지므로 클라이언트 요청에 대한 응답 시간이 줄어들고 동적 웹 페이지를 가속화할 필요도 없어집니다.

예를 들어, Cloudflare Workers는 Cloudflare CDN에서 실행되는 서버리스 JavaScript 함수로서 장치 유형, 하루 중 시간대, 사용자 위치, 타사 API에서의 데이터 등 다양한 이벤트 및 입력에 응답할 수 있습니다. 이러한 매개변수들에 따라 동적 콘텐츠가 생성되어 클라이언트 장치에 제공할 수 있으며 캐시의 정적 콘텐츠를 변경, 캐시, 제거할 수 있도록 지원합니다.

Cloudflare Workers는 JavaScript 코드이기 때문에 개발자는 이를 사용하여 동적 콘텐츠를 캐싱하는 것 외에도 다양한 기능을 개발할 수 있으며 전체 응용 프로그램을 구축할 수도 있습니다. 또한, Cloudflare Workers는 수초만에 전세계의 CDN 위치에 배포하고 전파할 수 있습니다.

Cloudflare 작업자는 가벼운 실행 환경에서 실행되므로 코드를 스핀업하고 수 밀리초 이내에 실행할 수 있습니다. 개발자는 백엔드 구성에 대해 걱정하지 않고 코드를 실행할 수 있습니다. 서버리스 컴퓨팅에 대해 자세히 알아보세요.

동적 콘텐츠 캐시와 동적 콘텐츠 압축의 차이

동적 웹 페이지를 가속화하는 다른 방법으로 원본 서버에서 생성된 동적 콘텐츠를 압축하여 최대한 신속하고 효율적으로 전달하는 방법이 있습니다. 동적 압축에서는 콘텐츠가 여전히 캐시가 아닌 원본 서버에서 오지만, 생성되는 HTML 파일들의 크기를 줄여 클라이언트 장치에 보다 신속하게 도달할 수 있도록 하는 것입니다. Railgun 은 동적 콘텐츠를 압축하여 성능을 향상시키는 제품의 예입니다.

ESI(Edge Side Includes)를 사용하면 어떻게 동적 웹 페이지 속도가 빨라집니까?

동적 웹 페이지 상의 많은 콘텐츠는 사용자와 관계없이 동일하고 페이지 상의 특정 요소들만이 동적인 경우가 많습니다. 즉, 페이지의 각 동적 사본에서 동일한 HTML 코드가 중복됩니다. 이러한 비효율성을 해결하기 위해 다수의 회사들이 힘을 모아 웹 페이지 상에 동적 콘텐츠가 표시되는 장소를 지정하는 마크업 언어인 Edge Side Includes(ESI)를 개발했습니다. (일부 CDN이 ESI를 이용하고 있지만, 웹 표준을 통제하는 W3C가 아직 ESI를 채택하지는 않았습니다.)

ESI 태그를가 있는 콘텐츠는 다른 곳에서 가져와야 하지만, 웹 페이지의 나머지 콘텐츠는 캐시할 수 있습니다. 웹 페이지의 일부만이 동적으로 생성되고 나머지는 캐시된다면, 사용자마다 전체 페이지를 생성하는 것보다 훨씬 빠르게 웹 페이지가 로드될 것입니다. ESI를 Cloudflare Worker와 결합하면 더욱 효율적인 프로세스를 만들 수 있습니다.