프론트엔드
GraphQL 커스텀 디렉티브로 만드는 선언적 지연 로딩
두줄요약
SSR에서 개인화 필드 동기화와 중복 요청 문제를 GraphQL 커스텀 디렉티브로 해결한 사례를 소개했습니다.\n`@lazy`로 필요한 필드만 재조회해 네트워크 비용을 줄이고 개발자 경험을 개선했습니다.
문제 상황
- Next.js SSR에서 일부 개인화 필드만 로그인 사용자 기준으로 달라져야 하는 상황
- 하이드레이션 이후 전체 데이터를 다시 가져오는 방식의 중복 요청, 페이로드 증가, UX 저하 문제
원인 분석
- 서버 렌더링 시점에 로그인 여부와 개별 엔티티의 개인화 상태를 바로 알기 어려움
- 클라이언트에서 카드별로 별도 조회하면 요청 수가 급증하고 캐시 페이지 활용이 어려움
해결 방법
- GraphQL 커스텀 디렉티브
@lazy로 CSR에서만 다시 가져올 필드를 선언적으로 표시 - Apollo Link에서 AST를 파싱해
@lazy필드를 분리하고, 엔티티별로 배치 쿼리 생성 - 정규화 캐시의 ID 병합을 활용해 별도 병합 로직 없이 최신 값 반영
성능/운영 포인트
- 로그인 의존 필드만 선택적으로 재조회해 불필요한 네트워크 요청 감소
- 배치 요청과 캐시 병합으로 응답 속도 및 백엔드 부하 개선
- 무한 루프 방지를 위한 context 플래그, SSR 캐시 hydration 처리 필요
적용해볼 점
isLiked,inCart,canEdit같은 개인화 필드에@lazy적용- SSR 캐시와 CSR 최신화를 분리해 선언적으로 동기화 구조 단순화