2025-11-01
RSC는 어떻게 서버/클라이언트 번들을 나눌까
React Server Components를 사용하면 클라이언트 번들 크기가 줄어든다는 것은 알지만, 실제로 어떤 메커니즘으로 번들이 분리되는지는 명확하지 않았습니다. Next.js 저장소의 실제 코드를 추적하며 빌드 타임부터 런타임까지의 처리 과정을 확인했습니다.
- REACTNEXTJS
React Server Components를 사용하면 클라이언트 번들 크기가 줄어든다는 것은 알지만, 실제로 어떤 메커니즘으로 번들이 분리되는지는 명확하지 않았습니다. Next.js 저장소의 실제 코드를 추적하며 빌드 타임부터 런타임까지의 처리 과정을 확인했습니다.
CSR 앱의 재방문 빈 화면 문제를 스냅샷 복원으로 해결하는 과정. 중복 렌더링 버그부터 오버레이 모드 도입까지, Prepaint가 ~0ms 복원을 달성한 여정을 공유합니다.
IndexedDB는 비동기지만 React는 동기 상태를 요구합니다. useSyncExternalStore와 메모리 캐시 패턴으로 이 간극을 메우고, 서버 동기화 보일러플레이트를 90% 줄인 과정을 공유합니다.
React Server Components를 사용하면 클라이언트 번들 크기가 줄어든다는 것은 알지만, 실제로 어떤 메커니즘으로 번들이 분리되는지는 명확하지 않았습니다. Next.js 저장소의 실제 코드를 추적하며 빌드 타임부터 런타임까지의 처리 과정을 확인했습니다.
CSR 앱의 재방문 빈 화면 문제를 스냅샷 복원으로 해결하는 과정. 중복 렌더링 버그부터 오버레이 모드 도입까지, Prepaint가 ~0ms 복원을 달성한 여정을 공유합니다.