Next.js와 React 선택 기준 정리

Next.js는 원래 React의 프레임워크로 등장했지만, 이제는 단순한 UI 라이브러리를 넘어서 웹 애플리케이션을 위한 풀스택 프레임워크로 진화했다.
React 역시 React 19를 통해 점점 더 서버 친화적 기능을 탑재하며 발전하고 있다.

---

React (CRA 또는 Vite 기반)

React는 UI 중심의 라이브러리로, 페이지 라우팅, 서버 연동, SEO, 렌더링 전략 등을 직접 설계해야 한다.
Next.js 같은 프레임워크를 쓰지 않고 React만 사용하면 다음과 같은 특징이 있다:

• CSR 중심 구조: 모든 콘텐츠가 클라이언트에서 렌더링됨
• 빠른 콜드 스타트: 특히 Vite를 사용할 경우 개발 서버 속도가 빠름
• 높은 자유도: 라우팅, 상태관리, 코드 구조 등 원하는 대로 구성 가능
• 개발 친화적 환경: HMR(핫 리로드), 빠른 빌드, 직관적인 디버깅 등 우수한 DX 제공
• 라우팅/SSR/SEO는 직접 구성 필요: react-router-dom, vite-ssr, express 등을 사용해야 가능

이런 경우 추천

• SEO가 필요 없는 단순한 SPA (대시보드, 어드민, 웹뷰용 프론트)
• 사내 시스템이나 빠르게 만들어야 하는 MVP
• 구조를 직접 설계하고 싶을 때, 또는 제약 없는 자유도가 중요할 때
• 서버 렌더링, 백엔드 통합이 필요 없는 경우

단점과 해결법

단점	설명	해결 방법
SEO 미지원	CSR 구조라 검색 엔진이 초기 HTML을 못 읽음	vite-ssr, react-snap, 또는 Next.js로 전환
서버 기능 없음	백엔드 없이 API, 인증, DB 연결 불가	Express, Firebase, Supabase 등 외부 연동
라우팅 직접 구성	react-router-dom 등으로 직접 설정	Route 구조 표준화 및 코드 스플리팅 전략 도입
초기 렌더 느림	모든 JS 로딩 후에야 화면 보임 → LCP 지표 나쁨	React.lazy, 코드 분할, Skeleton UI
상호작용까지 시간 지연	JS 로딩까지 클릭 등 인터랙션 안 됨	Preload, 초기 렌더 최소화, 비동기 지연 처리

---

Next.js

주요 특징

Next.js는 React 기반의 풀스택 웹 프레임워크로, 프론트엔드뿐 아니라 서버 기능까지 아우르는 다음과 같은 기능들을 제공한다.

• 다양한 렌더링 지원

  • SSR (Server Side Rendering): 서버에서 HTML 생성 후 클라이언트에 전달
  • SSG (Static Site Generation): 빌드 시 HTML 정적으로 생성
  • ISR (Incremental Static Regeneration): SSG + 특정 주기로 정적 페이지 재생성
  • CSR (Client Side Rendering): 필요에 따라 CSR 방식도 사용 가능

• 파일 기반 라우팅: 폴더/파일 구조만으로 라우팅 자동 설정

• 자동 코드 분할: 페이지 단위로 번들을 나눠 최적화된 로딩

• 이미지 최적화 내장: <Image /> 컴포넌트로 WebP 변환, lazy loading 자동 적용

• 서버 기능 통합:

  • API Routes: 백엔드 서버 없이 간단한 API 생성 가능
  • Middleware: 요청 전 처리 (예: 인증)
  • Edge Functions: 엣지 서버에서의 빠른 응답 처리

• App Router (13+) + Server Components 기반: 서버-클라이언트 분리를 통해 성능 최적화

• Server Actions (15+): API 없이 폼 데이터를 서버에서 직접 처리

이런 경우 추천

• SEO가 중요한 서비스 (블로그, 쇼핑몰, 마케팅 페이지 등)
• 정적과 동적 페이지가 공존하는 구조 (예: 제품 상세 페이지 + 메인 랜딩)
• 백엔드 없이 풀스택 개발하고 싶은 경우 (Prisma, Supabase 등과 잘 어울림)
• 이미지 성능 최적화가 핵심인 프로젝트 (포트폴리오, 커머스 등)
• 전역적인 성능 최적화와 코드 분할이 중요한 경우

단점과 해결법

단점	설명	해결 방법
초기 러닝커브 있음	App Router, Server Component 등 개념 많음	공식 문서, 작은 프로젝트로 연습 후 도입
복잡한 캐싱 구조	fetch, cache, revalidateTag 등 세밀하게 설계 필요	패턴 정리 후 캐시 키 관리 도구 도입 (예: query key factory)
Hydration 지연 문제	SSR된 HTML은 보여지지만 JS 도착 전까지 버튼 등 작동 안 함	상호작용 요소는 CSR 컴포넌트로 분리, Skeleton UI
개발 서버 느림 (특히 대형 프로젝트)	Webpack 기반이며 컴파일이 느림	turbo, swc, dynamic()으로 코드 분할
자유도 제한	폴더 기반 라우팅, App 구조 고정	Custom App 설정, 외부 라우터 연동 등으로 확장 가능

---

어떤 걸 선택해야 할까?

상황	Next.js	React
SEO 최적화 필요	SSR/SSG/ISR 내장	기본 CSR이라 부적합
서버 기능도 포함할지?	API Routes, Middleware 제공	직접 백엔드 연결 필요
정적/동적 렌더링 혼합	SSG + SSR + ISR 지원	CSR만 기본 제공
자유도 높은 구조가 필요한가	구조가 정해져 있음	커스터마이징 자유
빠른 프로토타이핑	Zero Config로 빠르긴 하나 초기 러닝커브 있음	CRA, Vite로 바로 시작 가능
모바일 WebView 전용 프론트	가능은 하지만 과함	CSR만으로 충분

---

기술의 역할 이해하기

React

• UI를 구성하는 라이브러리
• 필요한 기능은 직접 연결해야 함

Next.js

• React를 기반으로 한 웹 애플리케이션 프레임워크
• 서버 기능, 라우팅, SEO 등 전반을 포함