TanStack Start가 React Server Components를 품었다 — Next.js 말고도 선택지가 생긴 RSC 세계

React Server Components, 이제 Next.js만의 것이 아니에요

React Server Components(RSC)가 처음 발표됐을 때, 많은 개발자들이 기대하면서도 한 가지 불만이 있었어요. "이거 결국 Next.js에서만 쓸 수 있는 거 아니야?" 실제로 꽤 오랜 기간 RSC를 제대로 지원하는 프레임워크는 Next.js가 거의 유일했거든요. React 팀이 만든 기능인데 특정 프레임워크에 종속되어 있다는 게 아이러니하다는 목소리가 많았죠.

그런데 이번에 TanStack Start가 RSC를 공식 지원한다고 발표했어요. TanStack이라고 하면 React Query(지금은 TanStack Query)로 유명한 Tanner Linsley가 만든 생태계인데요, TanStack Start는 이 생태계의 풀스택 웹 프레임워크예요. 이 발표가 중요한 이유는, RSC가 드디어 Next.js 바깥에서도 실질적인 선택지를 갖게 됐다는 뜻이기 때문이에요.

RSC가 뭐길래 이렇게 중요한 건가요

React Server Components가 뭔지 간단히 짚고 넘어갈게요. 보통 React 컴포넌트는 브라우저에서 실행되잖아요. 사용자가 페이지를 열면 JavaScript를 다운로드하고, 브라우저가 그걸 실행해서 화면을 그려요. RSC는 이 중 일부 컴포넌트를 서버에서 미리 실행하는 거예요.

이게 왜 좋으냐면, 서버에서 실행되는 컴포넌트는 브라우저로 JavaScript를 보낼 필요가 없어요. 데이터베이스에 직접 접근하거나 파일을 읽는 것도 가능하고요. 결과적으로 사용자에게 전달되는 JavaScript 번들 크기가 줄어들고, 초기 로딩 속도가 빨라져요. 비유하자면, 식당에서 모든 재료를 테이블로 가져와서 손님이 직접 요리하게 하는 대신(클라이언트 렌더링), 주방에서 다 만들어서 완성된 요리만 내놓는 것(서버 컴포넌트)과 비슷해요.

TanStack Start의 RSC 구현, 뭐가 다른가

TanStack Start의 RSC 구현은 Next.js와 몇 가지 중요한 차이가 있어요.

첫째, 라우터 중심 설계예요. TanStack Start는 TanStack Router 위에 구축되어 있는데, 이 라우터는 타입 안전성(type safety)에 매우 강해요. 라우트 파라미터, 검색 파라미터(query string) 등이 전부 TypeScript 타입으로 추론되거든요. RSC와 결합하면 서버 컴포넌트에서 데이터를 가져올 때도 이 타입 안전성이 유지돼요.

둘째, 서버 함수(Server Functions) 통합이에요. Next.js의 Server Actions과 비슷한 개념인데, TanStack Start는 이를 TanStack Query의 mutation과 자연스럽게 연결해요. 이미 TanStack Query를 쓰고 있던 프로젝트라면 기존 캐싱 로직을 그대로 활용하면서 서버 컴포넌트를 도입할 수 있다는 뜻이에요.

셋째, 배포 유연성이에요. TanStack Start는 내부적으로 Nitro와 Vinxi를 사용하는데, 이 덕분에 Node.js는 물론 Cloudflare Workers, Deno, Bun 등 다양한 런타임에 배포할 수 있어요. Next.js가 Vercel에 최적화되어 있다는 인식이 있는 것과 대조적이죠.

Next.js, Remix, 그리고 TanStack Start

현재 React 풀스택 프레임워크 시장을 보면, Next.js가 압도적 1위이고 Remix(React Router v7)가 그 뒤를 쫓고 있어요. 여기에 TanStack Start가 새로운 플레이어로 등장한 거예요.

각각의 포지셔닝이 좀 달라요. Next.js는 가장 성숙하고 생태계가 넓지만, Vercel 플랫폼에 대한 의존도와 복잡해진 API가 불만 포인트예요. Remix/React Router v7은 웹 표준(Web Standards)에 충실한 간결한 설계가 장점이지만, RSC 지원은 아직 실험 단계예요. TanStack Start는 후발주자답게 기존 도구들의 장점을 취하면서 TanStack 생태계(Query, Table, Form 등)와의 시너지를 내세우고 있어요.

특히 TanStack Query를 이미 프로젝트에서 쓰고 있는 개발자라면 TanStack Start로의 전환이 자연스러울 수 있어요. 서버 상태 관리의 패러다임을 이미 공유하고 있으니까요.

한국 개발자에게 주는 시사점

한국에서는 Next.js가 React 풀스택 프레임워크의 거의 표준처럼 자리잡고 있어요. 채용 공고를 봐도 Next.js 경험을 요구하는 곳이 대부분이죠. 하지만 RSC를 지원하는 프레임워크가 늘어난다는 건 개발자에게 분명 좋은 소식이에요.

당장 프로덕션에서 Next.js를 대체하라는 얘기가 아니에요. 하지만 새 프로젝트를 시작할 때, 특히 TanStack Query를 헤비하게 쓰는 프로젝트라면 TanStack Start를 한번 살펴보는 것도 좋겠어요. 사이드 프로젝트에서 먼저 시도해보면서 RSC가 Next.js 바깥에서 어떤 느낌인지 체험해 보는 것도 추천해요.

RSC라는 기술 자체의 이해도를 높이는 데에도 도움이 될 거예요. Next.js에서만 RSC를 접하면 "이게 Next.js의 기능인지 React의 기능인지" 헷갈리는 경우가 많거든요. 다른 프레임워크에서 같은 개념을 접하면 RSC의 본질을 더 명확히 이해할 수 있어요.