프레임워크 선택에 절대적인 순위는 없다. 먼저 API를 분리할지, 서버 렌더링이 필요한지, 배포 환경이 무엇인지, 팀이 운영할 수 있는지를 정해야 한다. 별점보다 요구사항과 제약 조건을 기준으로 선택하는 편이 실패가 적다.

먼저 결정할 네 가지

  1. 검색 유입과 링크 미리보기가 중요한가?
  2. 브라우저 화면과 API를 같은 저장소·런타임에서 운영할 것인가?
  3. 인증된 관리자 화면이 중심인가, 공개 콘텐츠가 중심인가?
  4. 서버 런타임, Edge, 정적 호스팅 중 어디에 배포할 것인가?

API가 분리된 경우

FastAPI, NestJS, Elysia, Fastify 같은 별도 API가 이미 있다면 프론트엔드의 역할은 화면과 사용자 상호작용에 집중된다.

선택지 강점 주의점 잘 맞는 경우
React + Vite 구조가 단순하고 빌드·배포가 빠르다 라우팅, 데이터 패칭, 메타데이터 전략을 직접 조합한다 관리자, 대시보드, 로그인 중심 SPA
Next.js SSR·SSG·메타데이터와 라우팅 생태계가 풍부하다 별도 API 구조에서는 서버 기능 일부가 중복될 수 있다 공개 페이지와 관리자 화면이 함께 있는 서비스
React Router Framework Mode 라우트 중심 데이터 로딩과 Form/Action 흐름이 명확하다 팀이 해당 데이터 규칙을 익혀야 한다 URL과 CRUD 흐름이 중요한 업무 시스템
TanStack Start 타입 안전한 라우팅·검색 파라미터와 서버 함수가 강하다 현재 버전과 생태계 성숙도를 도입 시점에 재확인해야 한다 TypeScript 중심 신규 프로젝트

추천 기준

  • 내부 관리자 화면이고 SEO가 필요 없다면 React + Vite가 가장 단순하다.
  • 공개 콘텐츠와 SEO가 함께 필요하다면 Next.js 또는 React Router Framework Mode가 편하다.
  • URL 상태와 End-to-End 타입 안정성을 특히 중시하면 TanStack Start를 검토한다.

API를 통합하는 경우

선택지 서버 기능 강점 고려할 점
Next.js Route Handler, Server Function, Server Component 자료와 호스팅 선택지가 많고 렌더링 전략이 다양하다 정적 Export에서는 동적 서버 기능을 사용할 수 없다
React Router Framework Mode Loader, Action, Middleware Web Standard 기반 요청·응답과 Form 처리가 자연스럽다 런타임과 배포 어댑터를 먼저 확인해야 한다
TanStack Start Server Function, Server Route, Middleware 타입 안전성과 Router·Query 조합이 좋다 도입 전 현재 릴리스 단계와 플러그인 호환성을 확인한다
React + Vite 별도 구성 필요 클라이언트 구조는 단순하다 통합형으로 만들려면 별도 서버와 규칙을 직접 구성한다

작은 서비스는 통합형이 배포 단위를 줄여주지만, 백엔드가 여러 클라이언트를 지원하거나 독립적으로 확장되어야 한다면 API 분리가 더 명확할 수 있다.

SEO와 초기 렌더링

기술 기본 성격 공개 콘텐츠 전략
Astro 콘텐츠 중심 정적 사이트 최소 JavaScript와 Islands에 강점
Next.js React 풀스택 프레임워크 SSR, SSG, 정적 Export를 요구사항에 맞게 선택
React Router Framework Mode 서버 렌더링 가능한 React 프레임워크 라우트 단위 데이터와 메타 처리
TanStack Start 타입 중심 React 풀스택 프레임워크 SSR, Streaming, Server Function 지원
SvelteKit Svelte 풀스택 프레임워크 SSR과 정적 생성 지원
React/Vue + Vite SPA 기본 CSR Prerender 또는 별도 SSR 구성 없이는 공개 콘텐츠에 불리할 수 있음

SSR을 쓴다고 검색 순위가 자동으로 오르는 것은 아니다. 검색 의도를 충족하는 콘텐츠, 고유한 제목과 설명, 올바른 canonical, 구조화 데이터, 내부 링크, 접근성, Core Web Vitals가 함께 필요하다.

DailBit에서 Next.js를 선택한 이유

DailBit은 포트폴리오와 기술 글이 검색 엔진에 완성된 HTML로 전달되어야 한다. 글은 배포할 때만 변경되므로 Next.js의 정적 Export와 generateStaticParams를 사용해 각 Markdown 문서를 HTML로 생성했다.

이 방식은 다음과 잘 맞는다.

  • 별도의 Node.js 서버 없이 Cloudflare Pages에 배포
  • 글별 title, description, Open Graph 생성
  • Markdown 추가 시 글 목록과 사이트맵 자동 갱신
  • 런타임 장애 지점과 호스팅 비용 최소화

반대로 로그인, 쿠키, 요청별 SSR, Server Action이 필요해진다면 정적 Export를 유지할 수 없다. 그때는 Next.js 서버 배포나 다른 풀스택 런타임으로 전환해야 한다.

빠른 선택표

상황 우선 검토
로그인 중심 관리자·대시보드 React + Vite
SEO와 React 생태계가 모두 중요 Next.js
Form과 CRUD, 웹 표준 흐름 중심 React Router Framework Mode
타입 안전한 라우팅과 URL 상태 중심 TanStack Start
블로그·문서·랜딩이 대부분 Astro
대규모 조직의 강한 규칙과 일관성 Angular

결론

가장 좋은 프레임워크는 기능이 가장 많은 도구가 아니라 팀이 이해하고 운영할 수 있으면서 요구사항을 가장 단순하게 충족하는 도구다. 작은 PoC를 같은 배포 환경에 올려 빌드 시간, 번들, 인증, 오류 처리까지 비교한 뒤 결정하는 것이 안전하다.

참고 자료