Remix 팀은 Remix의 멋진 데이터 라우터(Data Routers)를 React Router v6.4에 도입했습니다. 업데이트 기능을 사용하면 싱글 페이지 애플리케이션(SPA)에서 Remix가 제공하는 혜택을 바로 활용할 수 있습니다.
가장 멋진 점은 병렬 데이터 패치(parallel data fetching)로 네트워크 워터폴의 Spinnageddon(게이지에서 바늘의 움직임)을 제거하고, 페이지 로딩 속도를 향상시켰다는 점입니다.
데이터 라우터는 다음의 장점을 보여줍니다.
새로운 데이터 라우터와 데이터가 필요한 라우트는 애플리케이션 최상위 수준에서 로더와 컴포넌트를 정의해야 하므로 배포 시 대용량 크기로 번들(bundle)됩니다. 번들 크기가 커지면 그 만큼 사용자 경험이 저하됩니다. 😱
첫 페이지가 랜딩(landing)될 때, 큰 크기의 JavaScript 파일을 내려받아야 한다면 성능에 문제가 생깁니다.
그러므로 병렬 데이터 가져오기 및 콘텐츠 레이아웃 시프트가 없는 이점을 유지하면서 애플리케이션에서 데이터 라우터 코드를 분할하는 방법을 사용해야 합니다.
이 방법은 Remix의 파일 규칙에 따라 동일한 파일 안에서 컴포넌트와 로더 함수를 관리하고, 중간에 지연 처리하는 라우트 파일이 추가됩니다.