더스윙 기술 블로그 · 2025. 12. 03.
CSR 환경에서 Dynamic OpenGraph 구현하기
AI 엔지니어링 브리핑
Vite·React 기반 CSR 서비스에서 전체 구조를 바꾸지 않고도 소셜 공유용 OpenGraph 정보를 동적으로 제공한 방법을 소개합니다.
문제 & 배경
- 문제 & 배경: 카카오톡과 같은 소셜 크롤러는 자바스크립트를 실행하지 않아 React Helmet으로 나중에 추가한 메타 태그를 읽지 못했으며, 멤버십별 공유 이미지·제목·설명이 필요했습니다.
기술 & 해결책
- 기술 & 해결책: 처음에는 빌드 시 멤버십별 HTML을 만드는 방식을 시도한 뒤, 최종적으로 CloudFront Function이 User-Agent로 크롤러만 판별해 엣지에서 맞춤 HTML을 즉시 응답하고 일반 사용자는 기존 S3 기반 SPA로 통과시키도록 구현했습니다.
교훈 & 주의점
- 교훈 & 주의점: OpenGraph만 필요하다면 SSR·SSG로 전체 구조를 바꾸기보다 필요한 대상과 범위에 맞는 엣지 처리가 효율적이며, 봇 오판을 줄이는 감지 로직과 캐시 정책을 함께 설계해야 합니다.
함께 읽을 글
내용이 비슷해요내용이 비슷한 글을 먼저 보여드려요. 같은 문제나 해결책을 다룬다는 뜻은 아니에요.