TanStack Start 1.0 — Remix·Next 대비 production 도입 평가

핵심 요약

TanStack Start 1.0 GA. 사내 SaaS 1개를 Next 14에서 전환. file-based routing + Query 통합이 강점, RSC는 일부 지원, 생태계는 Next 대비 약함. 8주 운영 사후.

1. 핵심 특징

• TanStack Router — type-safe URL, search params 강력
• TanStack Query 1차 통합 — loader = query, deduplication
• Server Functions — Next의 Server Action과 유사
• Vite 기반 — Turbopack/Webpack 아님

2. 라우팅 예

// app/routes/posts/$id.tsx
export const Route = createFileRoute('/posts/$id')({
  loader: ({ params }) => queryClient.fetchQuery(postQuery(params.id)),
  component: PostView,
})

loader = Query → 클라이언트에서 즉시 캐시 hit, 워터폴 없음.

3. Remix·Next 대비

4. 적합한 케이스

SPA-like 대시보드, 동적 search 많은 admin, Query 이미 사용 중인 코드 — Start. SEO 중심 마케팅 사이트는 Next가 여전히 우세(Image, ISR, generateStaticParams).

5. 함정

• RSC는 1.0 시점 beta — production은 client-only가 안전
• file 라우팅 자동 코드 생성 — git에 routeTree.gen.ts 커밋 정책 명확히
• loader error boundary — Next/Remix와 다름, errorComponent 정의