GraphQL 커스텀 디렉티브를 활용한 선언적 지연 로딩

이 게시물은 크리에이트립에서 GraphQL의 커스텀 디렉티브 @lazy를 사용하여 SSR 환경에서 개인화된 데이터를 효율적으로 처리하는 방법을 소개합니다.

문제점과 기존 시도

• SSR 시점에 로그인 여부에 따른 개인화 데이터 처리 어려움
• 클라이언트 렌더링만으로는 사용자 경험 저하와 요청 폭증 문제 발생
• 쿼리를 두 번 보내는 방식은 불필요한 네트워크 요청 증가

해결책: @lazy 디렉티브

• GraphQL 스키마에 @lazy 커스텀 디렉티브 추가
• Apollo Link를 활용해 쿼리에서 @lazy 필드 제거 후 기본값 세팅
• 클라이언트에서 별도 요청으로 @lazy 필드만 지연 로딩
• Apollo Client의 캐시 병합 기능으로 데이터 자동 업데이트

구현 및 효과

• AST 파싱으로 @lazy 필드 수집 및 두 번째 쿼리 자동 생성
• 엔티티별 배치 쿼리 요청 및 로그인 상태에 따른 필드 필터링
• SSR 캐시 하이드레이션 시 지연 로딩 필드 재요청 지원
• 네트워크 요청 최적화, 응답 시간 20% 개선, 개발자 경험 향상