[React] Good bye CRA, Hello Vite or Next.js! (2)

keynene·2024년 12월 13일

CRA next.js vite

React

목록 보기

23/23

👈 이전포스트 (CRA가 사라지게 된 배경)

CRA를 대체할 도구들은 어떤 것들이 있는가

Create React App은 이제 공식문서에서도 누락되어 역사속으로 사라졌다.
우리는 신규 프로젝트를 진행하려면 대체 기술 스택을 찾아야만 하는 상황에 놓인 것이다.

사실 CRA는 이전부터 여러 문제들이 발생해왔고 단점 또한 뚜렷했기 때문에 CRA를 대체할 기술 스택들은 진작 발전해오고 있었다.

Vite, Next.js, Parcel, esbuild, Remix 등 여러가지가 있지만 본 포스트에서는 Vite와 Next.js에 대해서만 다뤄보려고 한다.
(참고 - React 팀이 추천하는 기술 스택 : React 공식문서 - 설치 가이드)

Vite vs Next.js

Vite

Vite를 사용해야 하는 이유 - Vite 공식문서

Vite는 프랑스어로 "빠른" 이라는 뜻으로, 앞서 제시한 CRA의 대체 기술 스택중에서도 개발 서버가 빠르고 현대적인 웹 애플리케이션 빌드 도구이다. 2020년에 개발된 비교적 최신 라이브러리로 CRA에서 Vite로 마이그레이션하는 개발자들이 점점 더 많아지고 있다.

그리고 이전 포스트에서 제시했던 React팀의 공식 게시글 - Replace Create React App recommendation with Vite에서도 Vite를 언급하기도 했다.

Vite 장점

빠른 개발 서버
개발 서버를 시작할 때 기존의 번들링 없이 ESM(ES Module)을 기반으로 즉시 실행한다.
Webpack보다 훨씬 빠른 성능을 제공한다.
HMR(Hot Module Replacement)
코드 변경이 일어나면 변경된 모듈만 다시 로드하는 HMR(Hot Module Replacement)를 지원한다.
빠른 초기 빌드와 캐싱
빌드 프로세스가 가볍고 캐싱기능을 환용하여 재빌드 속도가 빠르다.
유연한 구성
CRA와 같이 초기 설정이 잘 되어 있고 복잡한 설정이 필요해도 유연하게 대응할 수 있다.

Vite 단점

ESM의존
ESM 기반이라 빠른 개발환경을 자랑하지만 ESM은 es6기반이기 때문에 es6미만 버전을 지원하려면 별도의 폴리필(polyfill)이 필요하다.
대규모 프로젝트에서의 경험 부족
2020년 개발된 상대적 신생 도구이기 때문에 기존 도구들(Webpack 등)에 비해 대규모 프로젝트에서의 실사용 사례가 적다.
프로덕션환경에서의 예기치 못한 버그들이 발생할 가능성이 있기때문에 아직까지는 불안정한 기술 스택이라고 할 수 있다.
SSR, SSG 지원 폭이 아직까지는 많이 좁다.
vite.config.js파일에서 ssr옵션을 추가하면 Next.js와 유사한 방식으로 SSR환경 설정이 가능하지만 아직까지는 Next.js만큼 신뢰할만한 성능은 아니다.
또한 기본적으로 CSR로 동작하기 때문에 SEO에 약하다는 단점이 있다.
현재 개발환경과 프로덕션환경이 다름 (추후 성능개선 가능성 있음)
개발환경에서는 ESM을 기반으로 번들링 없이 실행하지만 프로덕션환경에서는 Rollup으로 번들링하기 때문에 프로덕션 환경에서 발생할 문제에 대한 대처를 개발과정에서 미리 하기 어렵다.
실제로 많은 개발자들이 개발환경과 프로덕션환경에서의 차이로 인한 오류로 어려움을 겪고 있는데 Vite를 선정하게 되면 이러한 불안정한 부분을 감안해야 할 것 같다.
(하지만 Vite팀은 현재 문제를 인식하고 있고, 프로덕션환경에서 Rollup과 esbuild를 모두 대체하여 빌드 성능을 향상시키는 방향으로 개선해나갈 것이라고 한다. 개인적으로 언젠가 이 부분에 대한 안정화가 이루어진다면 Next.js를 뛰어넘을 가능성이 있는 차세대 기술 스택이라고 생각한다.)

Next.js

What is Next.js? - Next.js 공식문서

Next.js는 프로젝트 생성 뿐 아니라 라우팅, 데이터 패칭, SSR, SSG, 이미지 최적화 등 다양한 부가 기능을 지원하며 현존하는 프레임워크중에 가장 신뢰도있고 실사용이 많이 이루어지는 안정화된 메타 프레임워크이다.

또한, React 공식문서 - 설치 가이드에서도 프레임워크 사용을 권고하고 있고 그중에서 Next.js를 공식적으로 추천한다는 것을 알 수 있다.

Next.js 장점

다양한 렌더링 방식 지원
CSR(Client-Side Rendering), SSR(Server-Side Rendering), SSG(Static Site Generation), ISR(Incremental Static Regeneration) 등 프로젝트 요구사항에 따라 선택적으로 사용할 수 있어 유연성이 높다.
SEO가 중요한 페이지에는 SSR/SSG로, 사용자 인터렉션이 중요한 페이지는 CSR로 설정 가능하다.
SEO 최적화
서버에서 HTML을 렌더링(SSR, SSG)하여 검색 엔진 크롤러가 더 쉽게 콘텐츠를 색인할 수 있도록 도와준다.
메타 태그, OG(Open Graph)태그, 헤그 관리 등 SEO와 UX관련 기능을 효과적으로 구현할 수 있다.
파일 기반 라우팅
디렉터리 구조와 파일 이름에 따라 라우트를 자동을 생성하므로 별도의 설정없이 간단하게 페이지를 추가할 수 있다.
동적 라우팅, 캐치올(catch-all) 라우팅 등도 지원하여 복잡한 라우팅 구조를 쉽게 구현할 수 있다.
이미지 최적화
이미지 최적화를 기본적으로 지원하여 이미지 크기 조정, lazy loading, WebP변환 등을 자동으로 처리한다.
풍부한 생태계
Next.js는 적극적 개발과 업데이트 및 관리가 이루어지는데다 최근 1년간 프레임워크중 최다 다운로드 수를 자랑할 정도로 다양한 커뮤니티와 프로젝트 및 대규모 프로젝트에 실사용되고 있다.
이 때문에 비교적 안정적이고 공식문서 지원이 풍부하다.

Next.js 단점

복잡한 설정
설정 커스텀이 비교적 자유롭다는 장점이 있지만 프로젝트 규모가 커지고 고급 기능을 요구할수록 추가적인 설정과 공수가 발생한다.
또한 초기 설정이 Vite나 CRA에 비해 까다롭다.
번들 크기
SSR/SSG 사용시 초기 HTML과 JavaScript 번들 크기가 커질 수 있어 최적화에 신경써야 한다.
유연성 제한
Next.js는 기본적으로 SSR과 SSG에 최적화되어 있어, SPA만을 필요로하는 정적페이지에서는 불필요한 복잡성을 가져올 수 있다.

그래서 신규 프로젝트에서 Next.js를 선정하게 된 이유

Vite? or Next.js? ... Next.js!

API Routes로 간단한 로직을 처리함으로써 백엔드 팀과 협업 범위 조정 가능성 열어두기.
WebSocket을 이용한 실시간 기능을 적용할 예정인데, 이에 따른 유연한 대처 기술을 필요로 한다.
Server-Side Rendering(SSR)를 활용한 초기 데이터 처리 기술을 필요로 한다.
Static Site Generation(SSG) 기능을 통해 정적 콘텐츠 생성 및 캐싱을 요구한다. (캐싱 최적화)
Client-Side Rendering(CSR)와 Server-Side Rendering(SSR) 혼합 가능성이 있다.
Progressive Web App(PWA) 기능을 필요로 한다. (오프라인 환경에서도 활용 가능성 있음)
Search Engine Optimization(SEO) 효과를 극대화하고 싶다.
코드 작성 외 배포 시 예상치 못한 버그의 위험성을 줄이고 싶다.
(우리 수준에서 겪게될진 모르겠지만...?)

우리 팀이 논의한 결과, 신규 프로젝트의 요구사항은 위와 같이 정리되었으며,
이를 바탕으로 Next.js를 적용하기로 최종 결론을 내렸다.

자료조사를 해보니 이미 우리 신규 프로젝트 요구사항으로는 Next.js가 적합한 상황이었기 때문에 기술 스택을 결정하는데 많은 시간이 소요되진 않았다...

아무튼

Next.js를 선택한 이유는 이번 프로젝트의 특성과 요구사항에 가장 적합했기 때문이지, 모든 프로젝트에서 Next.js가 정답은 아니다.
예를 들어, Vite는 나의 이전 프로젝트와 같이 정적 페이지이면서 SPA(Single Page Application)를 목표로 하는 프로젝트에 오히려 Next.js보다 더 적합한 선택이 될 수 있다.

이처럼 개발 패러다임의 변화와 신기술의 등장, 발전에 따라 유용한 기술 스택은 언제든 변화할 수 있고 React 사용자의 90%가 활용했던 CRA(Create React App)조차도 빠르게 도태된 사례가 이를 잘 보여준다.

이번 과정에서는 트렌드에 따른 기술 스택을 선정하는 안목을 기를 수 있었고, 앞으로도 빠르게 변화하는 환경에 능동적으로 대응할 수 있는 전문성과 유연성을 갖춘 개발자로 성장해야 함을 다시금 깨닫게 되었다.

결론적으로, 알아보면 알아볼수록 Next.js에 매력을 느껴버린 우리 팀은 Next.js공부에 대한 의욕이 생겼고, 마침 신규 프로젝트의 요구사항이 Next.js 개발환경과 잘 맞아서 공부할 기회가 생긴 것 같다.

상황도 잘 따라줬지만 사실 Next.js를 공부하고 적용해보고 싶은 마음이 가장 컸다💗

...

그래도 기본적으로 SSR/CSR 등 다양한 렌더링을 지원하고, SEO에 최적화 되어있으며 API Routes, PWA, TypeScript, 코드분할기능 등 다양한 기본 기술을 제공하고 확장성이 용이한 Next.js로 신규 프로젝트를 진행해보기로 한 것으로 하고 CRA의 장례식을 마무리하겠다.

+이번 프로젝트가 개발완료되고나면 이전프로젝트였던 애플스토어 클론코딩 프로젝트에 Vite를 적용하여 리팩토링을 해보려고 한다🔥