Remix 3 + React Router 8 통합 — 라우팅의 미래는 어디로?

핵심 요약

Remix와 React Router가 한 패키지로 합쳐진 지 1년. React Router 8에 Remix의 loader·action·meta가 옵션으로 들어왔고, Remix 3는 React Router 8의 framework 모드라는 위치가 됐다. SPA 위주 코드베이스에서도 점진적으로 SSR을 추가할 수 있는 선택지가 매력적.

1. 한 줄 정리

• React Router 8 — 라이브러리(클라 라우팅)
• Remix 3 — React Router 8의 풀스택 모드(loader·action·SSR)
• 두 모드 사이 코드는 거의 동일

2. Next.js와의 위치 차이

3. SPA → 풀스택 점진 마이그레이션

// 1단계: React Router 8 + Vite 그대로
// 2단계: loader 추가 (서버에서 데이터 페칭 위임)
// 3단계: framework 모드 활성, SSR 켜기

한 단계씩 변환 가능. 한 번에 다 옮길 필요 없음.

4. loader/action — 기본기

export async function loader({ params }) {
  return json(await db.user(params.id));
}
export async function action({ request }) {
  const fd = await request.formData();
  return redirect("/users/" + (await create(fd)).id);
}

5. 캐싱 모델

Remix는 표준 HTTP Cache-Control · ETag를 그대로 활용. CDN(Cloudflare·CloudFront·Fastly) 무엇과도 추가 설정 없이 작동. Next 16의 새 캐시 모델보다 호환성·예측 가능성 우수.

6. 데이터 mutation

form action이 1급 시민. <Form method="post">로 JS 없이도 제출 가능, 클라 JS 로드 후엔 자동으로 점진적 향상. 접근성·신뢰성 자연 우수.

7. 결정 가이드

• 이미 React Router SPA → Remix 3로 점진
• 새 프로젝트, SEO+동적 비중 큼 → Next.js 16
• Edge·다중 런타임 자유 → Remix 3
• 풀 자동 캐시·이미지·폰트 통합 → Next.js 16

자주 묻는 질문

Q. RSC 지원? 옵션. React Router 8.2부터 일부 RSC 통합. 다만 Remix 철학은 표준 HTTP 우선이라 RSC 의존도가 Next보다 낮다.