create-react-app 와 next.js 어떤 걸 써야 할까?

CRA(eject X) vs CRA(eject O) vs Next.js

CRA without eject

• CRA에서 eject를 하지 않고 사용하는 방법
• React를 이용하여 프로젝트를 만들 때 사용하는 가장 기본적인 방법

장점

1. 신경써야 할 코드량이 적음
2. webpack 설정을 신경쓰지 않을 수 있음

단점

1. react-scripts로 인한 추상화로 설정 flow 이해가 힘듬
2. 추상화 정도가 높아서 라이브러리 적용시 webpack등 코어한 부분을 건드려야할 경우, 결국 eject를 해야 함
3. (CRA 공통) webpack-dev-server를 이용한 개발 모드를 위한 서버만 제공, build된 파일로 프로덕션 서버(BFF) 실행을 위해서는 CRA와 동떨어진 새로운 서버를 만들어야함
4. (CRA 공통) SSR을 자체적으로 지원하지 않기 때문에 추가 작업 필요
5. (CRA 공통) code-splitting을 위해서는 특별히 코드에 명시해야 함
6. (CRA 공통) client-side routing을 위해서 react-router같은 라이브러리를 설치해야 함

CRA with eject

• CRA에서 eject를 해서 사용하는 방법

장점

1. webpack을 커스터마이징하여 설정할 수 있음

단점

1. 건드릴 필요 없는 불필요한 코드 증가로 인한 복잡성 증가
2. JavaScript로 짜여진 CRA의 모든 config 파일들(Webpack, Babel ...)을 직접 유지보수해야 함
3. One Build Dependency의 장점을 잃게 됨, 작업 도중 하나의 패키지가 필요해서 설치한다거나, 삭제할 때, 항상 다른 패키지들과의 의존성을 신경써야 함

Next.js

• Zero configuration 컨셉을 지닌 ZEIT사의 next.js
• 사용하는 회사
  • 카카오 페이지
  • 트리플
  • 하이퍼커넥트
  • 우아한 형제들 웹툰
  • 해외
    • Netflix, Tencent News, Twitch, Hulu, Nike, Uber, AT&T, Auth0 등 다양한 곳에서 사용
• 수십 가지 다양한 라이브러리 연동 예제 (redux, apollo, …) 제공

장점

1. Zero Configuration이라는 특징에 맞게 플랫폼 관리 시간이 적게 들고 컴포넌트 개발을 통한 서비스 개발에 집중할 수 있게 함
2. 데이터 프리패칭 지원 - SSG(Static Site Generation), SSR(ServerSide Rendering) 사용가능 (CSR도 사용가능)
3. 개발 모드를 위한 서버 뿐만 아니라, 프로덕션 서버(BFF)도 제공 및 다양한 서버 라이브러리(Express, Koa)로 수정 가능
4. SSR 지원 및 Google Chrome 팀과 협업으로 SEO 및 로드 성능이 높음
5. 코드베이스가 TypeScript이고, 자체적으로 TypeScript 지원
6. 특별한 설정을 하지 않아도 지원해주는 개발 편의기능 (페이지에 사용되는 코드만 로드하는 code-splitting를 통한 번들 최적화, 파일 기반 라우팅, Webpack, Babel을 이용한 자동 컴필레이션 및 번들링, React Fast Refresh, SSG, SSR, static 파일 서빙시 ./public를 /에 매핑해줌)

단점

1. 커스텀해야 할 부분이 생길 경우가 있음 (그러나 CRA eject에 비하면 편리)
   • next.config.js - next-transpile-modules, spritePlugin, optimizedImages
   • custom server - 지원하지 않는 브라우저 처리 혹은 미들웨어 사용
2. 리액트 프레임워크이기 때문에 프레임워크에 대한 지식 필요(_app.js, _document.js 등)

추상화 정도

• CRA(eject X) > next.js > CRA(eject O)

개발자 경험

• next.js > CRA(eject X) > CRA(eject O)

참고자료

• Create-React-App에서 Eject사용안하기(customize-cra, react-app-rewired) - CRA eject 비교
• CRA vs Next.js vs Gatsby – Comparison and How to Choose One
• Next.js vs. Gatsby vs. Create React App
• [4분코딩] 리액트(React)와 찰떡 궁합 Next.js - 간단한 Next.js 설명