Astro + Cloudflare Pages '하이브리드 캐싱' 최적화... 속도 미쳤는데 서버비 0원 실화? 🚀

Astro + Cloudflare Pages 하이브리드 캐싱 최적화 조합이 프론트엔드 개발자들 사이에서 미친 반응을 얻고 있습니다. 정적 웹사이트의 가벼움과 동적 서버 렌더링의 유연함을 둘 다 챙기고 싶을 때 이만한 게 없거든요.

웹사이트 개편할 때 Vercel 요금 폭탄에 시달리다가 클라우드플레어로 넘어오신 분들은 "이걸 왜 이제 알았지?" 하고 무릎을 쳤다는 후기가 수두룩합니다.

Astro Cloudflare Pages 하이브리드 캐싱 설정 방법, SSG와 SSR 꿀조합의 등장

Astro의 output: 'hybrid' 모드는 블로그나 마케팅 페이지처럼 대부분의 콘텐츠를 SSG로 빌드하고, 로그인이나 API 연결이 필요한 특정 라우트만 SSR로 분리하는 기술입니다.

"원래 Next.js 쓸 때는 람다 함수 호출 수 늘어날까 봐 밤에 잠도 못 잤는데, Astro 하이브리드 켜니까 빌드도 1초 컷에 엣지 연산 부하가 제로에 수렴함 ㅋㅋㅋ"

설정도 엄청 단순해서 astro.config.mjs에서 어댑터 달고 output: 'hybrid' 한 줄만 넣으면 준비가 끝나는데요.

Astro vs Next.js 정적 블로그 성능 비교 포스트에서도 언급했듯이, JavaScript 번들을 최소화하는 엠티 아일랜드 아키텍처 덕분에 렌더링 속도가 그야말로 미쳐 날뜁니다.

Cloudflare Pages에 배포된 SSR 라우트는 Astro.response.headers에 Cache-Control을 제대로 설정해 줘야 글로벌 엣지 네트워크에서 총알 속도로 캐싱됩니다.

동적 페이지라고 해서 매번 엣지 함수(Worker)를 새로 돌리면 응답 지연(TTFB)이 생길 수밖에 없는데요.

public, max-age=0, s-maxage=3600, stale-while-revalidate=60 같은 SWR 헤더 조합을 얹어주면, 첫 요청 이후에는 클라우드플레어 CDN이 0.01초 만에 캐시된 HTML을 뿌려줍니다.

실제로 정적 웹사이트 Cloudflare Pages 배포 가이드처럼 무제한 대역폭 인프라를 활용하니까, 트래픽 폭주가 터져도 서버가 터지기는커녕 엣지 캐시 히트율이 99%를 찍는 기적이 일어납니다.

하이브리드 모드에서 동적 처리가 필요한 페이지에는 파일 최상단에 export const prerender = false; 구문을 명시해야 함을 잊지 말아야 합니다.

다만 동적 라우트라고 무턱대고 DB 쿼리를 쌩으로 찌르면 캐시 무효화 시점에 백엔드 서버가 비명을 지를 수 있는데요.

이럴 때는 Cloudflare KV나 D1 인메모리 데이터를 렌더링 단에서 캐시 레이어로 묶어주거나, 정적 자산 경로(/_astro/*)에 지연 시간이 생기지 않도록 _headers 설정을 사전에 검증해 두는 것이 꿀팁입니다.

astro.config.mjs 파일에 output: 'hybrid' 모드와 Cloudflare 어댑터를 설정하면 됩니다.

Astro.response.headers에 Cache-Control 헤더(s-maxage, stale-while-revalidate)를 지정하여 엣지 CDN 캐시를 활성화합니다.

해당 Astro 페이지 파일 상단에 export const prerender = false 선언을 넣으면 SSR로 동적 렌더링됩니다.

Astro + Cloudflare Pages 하이브리드 캐싱 최적화 조합은 진짜 1원 한 푼 안 들이고 초고속 글로벌 블로그나 웹 앱을 뽑아낼 수 있는 끝판왕 템플릿입니다.

여러분은 사이트 배포할 때 SSG랑 SSR 중 어떤 방식을 주로 쓰고 계시나요? 댓글로 여러분만의 엣지 캐싱 꿀팁이나 후기를 공유해 주세요 🚀