프론트엔드
CSR 환경에서 Dynamic OpenGraph 구현하기
두줄요약
CSR 환경에서 소셜 공유용 OpenGraph 메타 태그를 동적으로 제공하는 방법을 다뤘습니다. CloudFront Function으로 봇만 분기해 엣지에서 HTML을 응답하고 기존 CSR 구조는 유지했습니다.
문제 상황
- Vite + React 기반 CSR에서 소셜 크롤러가 동적 메타 태그를 읽지 못하는 문제
- 멤버십별로 다른 OpenGraph 카드가 필요하지만 SSR 전환은 과도한 상황
원인 분석
- React Helmet 같은 클라이언트 측 메타 변경은 봇이 실행하지 않는 JavaScript에 의존
- SPA 라우팅과 S3/CloudFront 정적 호스팅 구조가 멤버십별 HTML 응답과 맞지 않음
해결 방법
- Vite 플러그인으로 SSG 파일을 생성해보았지만 운영 복잡성과 확장성 문제를 재확인
- CloudFront Function에서 User-Agent로 봇을 판별해 엣지에서 OpenGraph HTML을 즉시 응답
- 일반 사용자는 기존 S3 index.html과 CSR 라우팅을 그대로 유지