GraphQL 커스텀 디렉티브로 만드는 선언적 지연 로딩

SSR 개인화 데이터 문제

• Next.js SSR에서 개인화 데이터(예: 좋아요 상태)는 서버에서 알기 어려워 캐시 활용 및 성능에 문제 발생.
• 기존 방식은 UX 저하, 요청 쇄도, 불필요한 중복 쿼리 및 레이턴시를 야기. @lazy 디렉티브 기반 지연 로딩
• GraphQL 커스텀 디렉티브 @lazy를 도입, 클라이언트 하이드레이션 후 특정 필드만 선언적으로 지연 로딩하도록 구현.
• Apollo Link가 초기 쿼리에서 @lazy 필드를 제외하고, 클라이언트에서 별도로 자동 요청 후 Apollo Client의 ID 기반 캐시로 자동 병합.
• 엔티티별 배치 쿼리 생성, 무한 루프 방지, SSR 캐시 하이드레이션 후 재요청 로직 포함. 개선 효과 및 활용
• 백엔드 P95 응답 시간 약 20% 개선, 네트워크 페이로드 감소로 속도 향상.
• 코드 중복 제거 및 개발자가 고민할 필요 없는 개발자 경험(DX) 향상.
• 로그인 의존적 데이터, 개인화 정보, 권한 필드 등에 효과적.