Module Federation 기반 Redux Singleton 구현을 통한 Cross-Remote 상태 동기화 해결

Shared Redux Store in Next.js Module Federation: Cross-Remote State

Srinu Web developer2026년 5월 1일2분advanced

AI 요약

Context

Next.js Host와 React Remote 간 Module Federation 적용 시 각 Remote가 독립적인 Redux Store 인스턴스를 생성하는 문제 발생. 이로 인해 Remote 간 상태 공유가 불가능하며, Redux DevTools 상에 다수의 Store가 존재하는 상태 불일치 현상 초래.

Technical Solution

@myapp/store 패키지를 통한 전역 Redux Singleton 구조 설계로 단일 Store 인스턴스 보장
Host에서 Store를 생성하고 Provider로 래핑하여 모든 Remote가 동일한 인스턴스를 참조하는 구조 채택
next.config.js 및 webpack.config.js의 shared 설정에 singleton: true와 strictVersion 적용을 통한 런타임 협상 강제
Server-side Rendering 시 발생하는 Crash 방지를 위해 ClientReduxProvider 도입 및 ssr: false 설정 적용
독립적 개발 환경 유지를 위해 각 Remote에 개별 Provider를 배치하되 런타임 시에는 Federated Store를 우선하도록 구성
Client mount 시점에만 상태를 복구하는 Hydration 전략을 통한 SSR-Federated State 충돌 방지

실천 포인트

- Redux DevTools에서 Store 인스턴스 개수를 확인하여 Singleton 협상 성공 여부 검증 - Shared block 설정 내 singleton: true 옵션 누락 및 오타 여부 점검 - Federated State 접근 시 SSR 단계에서의 접근을 배제하고 Client-side Hydration 적용 여부 확인 - 전역 상태, 지역 상태(useState), URL 파라미터, Server State(TanStack Query) 간의 상태 결정 매트릭스 수립

태그

#Singleton #Module Federation #Redux #Micro Frontend #Next.js

원문 읽기