Next.js에서 QueryClient를 전역변수로 사용해도 될까요?
프론트엔드
Next.js에서 QueryClient를 전역변수로 사용해도 될까요?
두줄요약
Next.js SSR에서 전역 QueryClient를 공유하면 요청 데이터가 누적되어 메모리 누수가 발생했습니다. 요청마다 QueryClient를 분리해 GC가 회수할 수 있도록 개선했습니다.
문제 상황
- Next.js SSR 서버에서 메모리 사용량이 지속 증가하고 GC 후에도 해제되지 않는 메모리 누수 발생
- 페이지 이동과 시간이 지날수록 메모리가 쌓이고, OOM 직전까지 가며 주기적 재시작이 필요했던 상태
원인 분석
- 모듈 레벨 전역 변수로 생성한 QueryClient가 서버의 모든 요청에서 공유
- 각 요청의 상품 데이터와 Query Key가 하나의 캐시에 누적되어 참조가 유지되는 구조
해결 방법
- _app.tsx에서 useState 초기화 함수로 요청별 QueryClient 인스턴스 생성
- 사용처에서는 useQueryClient로 현재 컨텍스트의 QueryClient를 가져와 캐시 조작