CSR 환경에서 Dynamic OpenGraph 구현하기

이 게시물은 Vite + React 기반의 CSR 웹 애플리케이션에서 서버 사이드 렌더링(SSR) 전환 없이 동적 OpenGraph 메타 태그를 제공하는 방법을 소개합니다.

문제와 배경

• CSR 환경에서는 소셜 크롤러가 클라이언트에서 변경한 메타 태그를 인식하지 못함
• SSR/SSG 전환 없이 빠른 배포와 유연성을 유지하는 것이 목표

해결책

• Vite 플러그인으로 멤버십별 정적 HTML 생성 시도
• CloudFront + S3 환경의 SPA 라우팅 문제 해결을 위한 확장자 없는 HTML 파일과 Content-Type 명시
• CloudFront Function을 이용해 소셜 크롤러 User-Agent 감지 후 엣지에서 동적으로 메타 태그 포함 HTML을 즉시 응답

성과 및 결론

• 응답 시간 1ms 이하, 비용 효율성 및 유지보수 용이성 개선
• 기존 SPA 사용자 경험 유지와 소셜 공유 최적화 양립
• 프로젝트 특성에 맞는 최소한의 아키텍처 변경으로 문제 해결