TanStack Start: Next.js의 대안이 될 차세대 풀스택 프레임워크 🚀
Next.js의 use client/use server 디렉티브와 끊임없이 변화하는 캐싱 방식에 지치셨나요? TanStack Start는 Vite 기반의 새로운 풀스택 메타프레임워크로, 보다 직관적이고 유연한 개발 경험을 제공합니다. 이 글에서는 실제 투두 리스트 애플리케이션을 구축하며 TanStack Start의 모든 핵심 기능을 60분 만에 마스터할 수 있도록 안내합니다.
TanStack Start 프로젝트 생성하기
TanStack Start 프로젝트를 시작하는 가장 쉬운 방법은 CLI 도구를 사용하는 것입니다.
npm create @tanstack/start@latest
프로젝트 설정 옵션
- Tailwind CSS: 스타일링을 위한 유틸리티 CSS 프레임워크
- ESLint: 코드 품질 관리를 위한 린터
- Drizzle: 타입 세이프한 데이터베이스 ORM
- Shadcn: 재사용 가능한 UI 컴포넌트 라이브러리
- Postgres: 관계형 데이터베이스
💡 TanStack Start는 Vite 위에서 동작하며,
routeTree.gen.ts파일을 자동 생성하여 전체 애플리케이션에 걸쳐 완벽한 타입 안전성을 제공합니다.
핵심 개념: 서버 함수(Server Functions) 🎯
TanStack Start의 가장 큰 특징은 서버 함수입니다. Next.js의 서버 액션과 유사하지만, 데이터 조회(GET)와 수정(POST) 모두에 사용할 수 있다는 점이 다릅니다.
서버 함수 유형 비교
| 함수 유형 | 실행 위치 | 주요 용도 |
|---|---|---|
createServerFunction | 서버 & 클라이언트 | 데이터 조회/수정 (가장 많이 사용) |
createServerOnlyFn | 서버 전용 | 민감한 데이터 처리, DB 직접 접근 |
createClientOnlyFn | 클라이언트 전용 | 로컬 스토리지, 브라우저 API 사용 |
createIsomorphicFn | 서버/클라이언트 분기 | 플랫폼별 로직 구현 |
서버 함수 예제 (데이터 조회)
const getTodos = createServerFunction({
method: 'GET',
handler: async () => {
return await db.query.todos.findMany();
}
});
서버 함수 예제 (데이터 생성)
const addTodo = createServerFunction({
method: 'POST',
inputValidator: z.object({
name: z.string().min(1)
}),
handler: async ({ data }) => {
await db.insert(todos).values({ name: data.name, isComplete: false });
throw redirect({ to: '/' });
}
});
🔑 클라이언트에서 서버 함수를 호출할 때는
useServerFunction훅으로 래핑해야 리다이렉트와 에러 처리가 정상 동작합니다.
TanStack Start vs Next.js: 핵심 차이점
TanStack Start는 Next.js와 달리 use client/use server 디렉티브가 필요 없습니다. 모든 컴포넌트가 기본적으로 서버와 클라이언트 양쪽에서 실행되며, 개발자가 명시적으로 실행 위치를 제어합니다.
주요 장점
- 직관적인 데이터 흐름: 서버 함수를 통한 명확한 클라이언트-서버 통신
- 완벽한 타입 안전성: 자동 생성된 라우트 트리로 엔드포인트와 파라미터의 타입을 보장
- 유연한 렌더링:
ClientOnly컴포넌트로 클라이언트 전용 렌더링 지원 - Vite 기반: 빠른 HMR(Hot Module Replacement)과 빌드 속도
시작하기
TanStack Start는 아직 초기 단계(early days)이지만, 그 잠재력은 매우 큽니다. Next.js의 복잡성에 지친 개발자라면 지금 바로 시도해보세요.
📅 정보 기준일: 2024-05-24
함께 보면 좋은 글:
