핵심 요약
크리에이트립은 GraphQL 커스텀 디렉티브 @lazy를 도입해 선언적 지연 로딩을 구현하고, SSR에서 개인화 데이터 의존 필드를 제외한 뒤 하이드레이션 이후 필요한 필드만 재조회하는 패턴으로 네트워크 부하를 줄이고 P95 응답시간을 약 20% 개선했습니다.
구현 방법
- Apollo Link로 @lazy 필드를 제거하고 기본값으로 채움
- LazyFetcher로 엔티티별 lazy 필드를 묶어 배치 쿼리 생성
- 로그인 여부에 따른 재조회 여부 제어
- 무한 루프 방지: 컨텍스트 플래그 사용
- SSR 캐시 Hydration 이후 클라이언트에서 lazy 필드 재조회
- ID 기반 캐시 정규화로 자동 병합
주요 결과
- 불필요한 요청 감소 및 네트워크 부하 절감
- 백엔드 P95 응답시간 약 20% 개선
- DX 향상 및 코드 중복 감소
- SSR-클라이언트 하이드레이션 간 데이터 일관성 유지
