데브허브 | DEVHUB | React Router Now Supports Server ComponentsReact Router Now Supports Server Components
- React Router가 마침내 서버 컴포넌트 지원 프리뷰 버전을 출시하며, 기존 입장에서 전환했습니다. 🚀
- Remix는 React의 복잡성을 이유로 자체 렌더러를 개발하며 React와 다른 길을 걷고 있습니다. 💔
- 데모 프로젝트는 React Router에서 서버 컴포넌트의 빠른 탐색, 로더 데이터, 서버 액션 기능을 시연합니다. ⚡
- 구현은 Express 서버와 Parcel을 기반으로 하며, Parcel은 현재 Vite와 달리 서버 컴포넌트를 지원합니다. 📦
- 라우팅은 서버에서 이루어지며, 이는 기존 React Router의 클라이언트 측 라우팅 방식과 다릅니다. 🗺️
root.ts 파일은 서버 측 라우팅을 담당하고, root.tsx는 레이아웃, 서버 컴포넌트, 에러 바운더리, 불안정한 미들웨어를 포함합니다. 🏗️
- 로더는 컴포넌트 렌더링 전에 서버에서 실행되며, 미들웨어를 통해 데이터를 주입할 수 있습니다. 📥
- 서버 액션은
use server 지시어를 사용하여 서버에서만 실행되며, 콘솔 로깅 및 UI 업데이트를 수행합니다. 💻
- 클라이언트 컴포넌트인 "pending" 버튼은 서버 액션 제출 시 로딩 상태를 시각적으로 표시합니다. ⏳
- React Router의 서버 컴포넌트 구현은 프리뷰 단계임에도 불구하고 매우 유망하며, Remix의 새로운 방향은 Remix Jam에서 더 자세히 공개될 예정입니다. ✨