소개

mubee는 TMDB 기반 영화 검색/관리 앱이고 SPA 구조인데 Vite랑 Next.js랑 고민을 많이 했다.

왜 Vite인지

Vite를 선택한 이유는 많지만 그 중에 몇가지 나열하자면...
1. 빠른 개발 환경
2. React Router 중심 구조
3. 서버 렌더링이 필요하지 않을거 같았음
4. 순수 프론트엔드 프로젝트임

Vite와 Next.js의 차이

항목	Vite	Next.js
성격	빠른 개발 환경과 번들링에 강한 빌드 도구	React 기반 풀스택 프레임워크
렌더링	기본적으로 CSR 중심	SSR, SSG, ISR, CSR 모두 지원
라우팅	직접 설정하거나 React Router 등을 추가	파일 기반 라우팅 내장
개발 속도	매우 빠름	기능이 많아 상대적으로 무거울 수 있음
SEO	기본적으로 약함	강함
초기 설정	가볍고 단순함	기능이 많아 설정 범위가 넓음
이미지 최적화	별도 라이브러리 필요	내장 기능 제공
API 처리	별도 서버 필요	API Routes로 가능
배포	자유롭게 배포 가능	Vercel과 특히 잘 맞음
적합한 프로젝트	SPA, 대시보드, 인터랙티브 앱	블로그, 쇼핑몰, 마케팅 사이트, SEO가 중요한 서비스

Vite와 함께 Vercel에 배포 했나?

Next.js와 Vercel이 궁합이 좋은건 알고 있지만 mubee 프로젝트가 Vite와 잘 맞았는데 자동 배포와 미리보기 배포가 잘돼서 선택한 것도 있다. 장점을 생각해본다면
1. GitHub와 연동이 편해서 git push만 해도 자동으로 배포
2. TMDB 토큰 같은 환경 변수를 웹에서 관리하기 편해서
3. SPA 배포에 적합해서
만약 SSR이 필요한 상황이였다면 Next.js를 선택했을 수도 있지만 Vite 기반 SPA로도 충분하다고 느꼈고, Vite로 빠르고 개발하고 Vercel로 간편하게 배포하기 위해 선택한거 같다.