Remix v2가 파일 기반 라우팅을 중첩 라우트로 전환하고 서버 컴포넌트 기본값 도입으로 클라이언트 측 데이터 로딩 waterfall 제거

Context

Next.js는 파일 컨벤션 기반 라우팅으로 복잡성을 초래했다. 클라이언트에서 순차적으로 데이터를 로드하는 waterfall 문제로 로딩 UI가 필수적이었다. 개발자는 useState, onSubmit 핸들러, fetch 호출로 폼 제출 로직을 직접 작성해야 했다.

Technical Solution

• 라우팅 구조를 v1 flat routes에서 v2 nested routes로 변경: 파일 이름으로 자동 라우트 생성
• 모든 라우트를 서버 컴포넌트 기본값으로 설정: 로더 함수에서 서버 측 데이터 로딩 수행
• 액션 함수 도입: 폼 제출 처리를 서버에서 수행하고 FormData로 수신
• 에러 바운더리 통합: CatchBoundary와 ErrorBoundary를 단일 ErrorBoundary로 통합
• Vite 기반 개발 서버로 전환: 커스텀 CSS 처리를 Vite의 네이티브 CSS 기능으로 대체

Key Takeaway

Remix v2는 중첩 라우트로 병렬 데이터 로딩을 가능하게 하고 서버 폼 처리로 JavaScript 의존도를 제거했다. 웹 표준 API(Request, Response, FormData) 기반 설계로 개념적 단순성을 달성했다.