# Next.js vs TanStack – Next.js의 한계와 TanStack의 장점

> Clean Markdown view of GeekNews topic #19921. Use the original source for factual precision when an external source URL is present.

## Metadata

- GeekNews HTML: [https://news.hada.io/topic?id=19921](https://news.hada.io/topic?id=19921)
- GeekNews Markdown: [https://news.hada.io/topic/19921.md](https://news.hada.io/topic/19921.md)
- Type: news
- Author: [xguru](https://news.hada.io/@xguru)
- Published: 2025-03-24T09:59:01+09:00
- Updated: 2025-03-24T09:59:01+09:00
- Original source: [kylegill.com](https://www.kylegill.com/essays/next-vs-tanstack/)
- Points: 14
- Comments: 1

## Summary

Next.js는 빠른 설정과 다양한 통합 지원, 고성능 대규모 애플리케이션에 유리한 점이 있지만, 불필요한 고급 기능의 복잡성과 금전적 비용 문제, 복잡한 학습 곡선 및 SPA 지원 부족 등의 한계가 있습니다. 반면, TanStack은 직관적이며 필요할 때 고급 기능을 쉽게 추가할 수 있고, Vite와 결합하여 간단한 구조와 빠른 성능을 제공합니다. TanStack은 서버 상태 관리와 디버깅이 용이하며, 특정 클라우드 서비스에 종속되지 않는 장점이 있습니다.

## Topic Body

- 아직 React를 좋아하고 Vercel이 제공하는 것도 좋지만, **Next.js의 복잡성 증가와 비용** 문제로 인해 **TanStack으로 전환**  
- TanStack은 아직 부족하지만, **직관적**이며 **필요할 때 고급 기능을 쉽게 추가 가능**  
- Next.js의 고급 기능이 필요해질 때까지는 TanStack이 최선의 선택  
  
### Next.js의 강점  
- **빠른 설정 및 다양한 통합 지원**  
  - Next.js는 "React Framework for the Web"으로, React 앱을 빠르게 설정 가능  
  - 다양한 통합 가이드가 있음 : MUI, MarkdocDataDog 등   
  - Jest와 같은 도구에 대한 네이티브 플러그인 제공  
- **고성능 대규모 애플리케이션에 유리**  
  - 개별 페이지의 렌더링 패턴을 세밀하게 조정 가능  
  - 고성능을 위한 다양한 API 제공  
    - 서버 사이드 렌더링(SSR)  
    - 부분 사전 렌더링(PPR)  
    - 엣지 함수, 스트리밍 및 선택적 하이드레이션  
  - 증분 정적 재생성(ISR) 지원으로 고트래픽 콘텐츠의 효율적 처리 가능  
  
### Next.js의 한계 및 문제점  
- **불필요한 고급 기능의 복잡성**  
  - 고급 기능들이 작은 규모의 앱에는 과도하게 느껴짐  
  - 초기 단계 스타트업에는 필요 없는 마이크로 성능 개선 기능이 많음  
- **금전적 비용 문제**  
  - Next.js의 많은 기능이 상용 서비스에 묶여 있음  
    - 엣지 컴퓨팅 (`middleware.ts`)  
    - 이미지 변환 (`next/image`)  
    - ISR (`export const revalidate = 60`)  
    - 서버리스 함수 실행 (`app/api/route.ts`)  
  - Vercel 서비스에 대한 의존도가 높아 비용 증가 위험  
- *복잡한 학습 곡선 및 API 표면**  
  - 앱 라우터의 복잡성으로 인해 학습 곡선이 높음  
  - 문서에서 개념 설명이 난해하고 이해하기 어려움  
  - 디버깅이 어려움  
    - 전체 경로 캐시, 데이터 캐시, 라우터 캐시 등 세 개의 캐시 시스템 존재  
- **SPA(싱글 페이지 애플리케이션) 지원 부족**  
  - Next.js의 SPA 지원은 제한적이며 성능 개선이 어려움  
  - Vite와 비교해 개발 서버 성능이 뒤처짐  
  - TurboPack 성능도 기대에 미치지 못함  
  
### TanStack + Vite의 장점  
- **간단하고 직관적인 구조**  
  - TanStack Router는 자동완성 및 Zod를 통한 검색 매개변수 검증 제공  
  - 코드 흐름이 명확하고 예측 가능함  
- **TanStack Query를 통한 상태 관리**  
  - 서버 상태를 쉽게 관리하고 디버깅 가능  
  - 개발자 도구가 내장되어 있음  
- **Vite의 빠른 성능**  
  - 빌드 및 코드 실행 속도가 빠름  
  - 복잡한 설정 없이 바로 작동함  
  - 특정 클라우드 서비스에 종속되지 않음

## Comments



### Comment 36342

- Author: pcj9024
- Created: 2025-03-25T22:35:29+09:00
- Points: 1

만들다보면 결국 next.js처럼 될거라고 봅니다