피드로 돌아가기
Dev.toFrontend
원문 읽기
RSC 기반 Signed URL 최적화로 LCP 3.2s에서 1.6s로 단축
How I wire Mux video into a Next.js + Sanity CMS upload workflow
AI 요약
Context
Sanity CMS와 Mux 비디오 통합 시 API Token 노출 위험과 Signed playback URL 생성에 따른 렌더링 지연 발생. 특히 기본 Poster Frame 로딩 방식이 LCP(Largest Contentful Paint) 성능의 병목 지점으로 작용하는 구조적 한계 존재.
Technical Solution
- Next.js RSC를 통한 서버 사이드 JWT Signing 구현으로 클라이언트 사이드 Token 노출 원천 차단
Promise.all을 활용한 Video 및 Thumbnail용 Token 병렬 생성으로 네트워크 Waterfall 현상 제거- 특정 타임스탬프(
time=3)와 WebP 포맷을 지정한 Poster URL 생성 및<link rel="preload">적용으로 초기 렌더링 속도 개선 - Next.js Route Handler를 Proxy로 활용하여 Mux Direct-upload URL을 발급하는 보안 업로드 워크플로우 설계
- Mux Webhook과 Sanity Management API를 연동하여 Asset 처리 완료 시 자동으로
playbackId를 동기화하는 비동기 파이프라인 구축
실천 포인트
1. Signed URL 사용 시 RSC에서 Token을 생성하여 클라이언트 번들에 Secret Key 포함 여부 확인
2. 비디오 Poster Frame의 기본값(time=0) 대신 실제 콘텐츠가 시작되는 타임스탬프 지정
3. LCP 최적화를 위해 `<link rel="preload">`와 WebP 포맷 조합 적용
4. 외부 서비스의 상태 변경 반영을 위해 Webhook 기반의 데이터 동기화 로직 구현