📋 개요

Next.js에서 MSW(Mock Service Worker)를 사용할 때 SSR은 정상 동작하지만 CSR에서 API 호출 에러가 발생하는 문제와 해결 방법을 정리했습니다. 원본 코드: GitHub - MSWProvider.tsx

🔴 문제 상황

• 모킹 설정(handlers.ts)

API 모킹 기능 사용 시 SSR은 정상 동작하지만, CSR은 API 호출 에러 발생

• SSR - ✅ 정상 동작
• CSR - ❌ 에러 발생

문제 원인

타이밍 이슈

1. 서버 MSW: MSWProvider 모듈이 로드되자마자 즉시 초기화 (정상 동작)
2. 클라이언트 MSW: MSWProvider의 useEffect에서 초기화
3. 문제: Page 컴포넌트의 useEffect가 MSWProvider의 useEffect보다 먼저 실행되어 MSW 준비 전에 API 요청 발생

잠재적 위험

서버 MSW도 비동기로 초기화되므로, 서버 컴포넌트 로딩 전에 MSW 초기화가 완료되지 않을 가능성이 있습니다. (이 내용은 하기 개선 사항에서 해결되었습니다.)

검토 내용

1. MSWProvider의 isReady를 context로 관리 (비효율)

MSWProvider에서는 항상 children을 반환하되, isReady state를 별도로 관리하여 page.tsx에서 isReady가 true가 되기 전에는 api 요청을 하지 않도록 막는 방법입니다.