Proof That React With RSCs is 2X Faster!
- React RSC(서버 컴포넌트)는 페이지 라우터보다 렌더링 속도가 최대 2배 빠르다. 🚀
- App Router는 서버에서 먼저 렌더링하고, 최소한의 클라이언트 컴포넌트만 클라이언트에서 렌더링하여 속도 향상을 가져온다. ⚡️
- Flight Data는 DOM의 직렬화된 버전으로, 클라이언트에서 VDOM 초기화에 사용되어 빠른 렌더링을 가능하게 한다. ✈️
- Pages Router는 모든 컴포넌트를 클라이언트에서 다시 렌더링하여 성능 저하를 야기한다. 🐢
- SPA(Single Page Application)는 초기 렌더링 속도가 RSC보다 느리며, DOM 노드를 처음부터 생성해야 하는 오버헤드가 있다. 🐌
- Valo와 같은 외부 상태 관리자를 사용하면 리프 노드를 효율적으로 관리하고 성능을 향상시킬 수 있다. 🌿
- RSC를 유지하면서 클라이언트 측 상호 작용을 추가하는 방법(데이터 속성 활용)을 보여준다. 💡