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

2 days ago 8

아직 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의 빠른 성능
- 빌드 및 코드 실행 속도가 빠름
- 복잡한 설정 없이 바로 작동함
- 특정 클라우드 서비스에 종속되지 않음

Read Entire Article