React vs Next.js
React
- 자바스크립트 라이브러리입니다.
- SPA 개발을 할 때 주로 사용합니다.
- Angular, Vue 에 비해 사용자 수가 더 많고, 관련 커뮤니티가 더 활성화되어 있습니다.
- 공식 문서에서 풀스택으로 개발하기 위해서 풀스택 리액트 프레임워크인 next.js 또는 remix 를 추천한다고 합니다.
- react 기본 세팅을 할 때, Create-React-App, Vite 등을 사용합니다.
Vite
- 빠르고 간결한 모던 웹 프로젝트 개발 경험에 초점을 맞춰 탄생한 빌드 도구입니다.
- 번들링할 때, rollup 기반의 다양한 빌드 커맨드를 사용할 수 있습니다.
- 개발할 때, hot module replacement 등의 다양한 기능을 지원합니다.
Create-React-App
- React 개발 시 Webpack, Babel 등 직접 설정해야하는 부분을 편리하게 도와주는 도구입니다.
- React 를 개발한 페이스북에서 제공하고 있습니다.
- 최근 다른 방법을 추천하고 있습니다.
- 디테일한 설정이나 커스텀 설정이 힘들다는 의견이 있습니다.
React 사용 시 문제점
- React 자체는 UI 컴포넌트 작성에 중점을 두며, 라우팅, 데이터 페칭, 빌드 설정 등 애플리케이션 개발에 필요한 다른 부분들은 포함하지 않습니다.
- React 와 함께 사용하는 서드파티 라이브러리들은 React 의 특정 버전에 의존하는 경우가 많습니다.
- React 가 업데이트될 때, 서드파티 라이브러리들이 이를 따라잡지 못하면 호환성 문제가 발생할 수 있습니다.
Next.js
- React 프레임워크입니다.
- User Interface : React를 사용하여 UI를 구축합니다.
- Routing : 이전 버전에서는 페이지 기반 라우팅을 제공하고 있고, 현재 13,14버전부터는 app 기반 라우팅을 제공함으로써 복잡한 라우팅 설정을 간편하게 만듭니다.
- Data Fetching : 서버 측 데이터 패칭, 클라이언트 측 데이터 패칭 등 다양한 패칭 방법을 지원합니다.
- Rendering : SSR, SSG, CSR 등 다양한 렌더링 방식을 제공합니다.
- Integrations : GraphQL, REST API 등과의 통합을 쉽게 할 수 있습니다.
- Infrastructure : 성능 최적화를 위한 다양한 도구와 설정을 제공합니다.
- Scalability : 대규모 애플리케이션에서도 효율적으로 동작하도록 설계되었습니다.
- Developer Experience : 개발자 경험을 극대화 하는 다양한 기능들을 제공합니다.
Next.js 사용 시 단점
- React에 Vite만 사용했을 때와 비교 했을 때의 오버헤드 / 안정성 / 유지보수성에 단점 및 러닝 커브 이슈가 있습니다. React에 비해 조금 더 배워야 할 것이 많아 초기 진입장벽이 존재합니다.
- 서버 세팅 및 관리를 해주어야 합니다. 이는 React에서는 고려하지 않는 사항으로 FE개발자가 신경을 써주어야 하는 부분이 더 늘어나게 됩니다.
결론
- Next.js 는 React 생태계의 문제점들을 해결하기 위해 탄생한 프레임워크입니다.
- React 애플리케이션을 쉽고 효율적으로 개발할 수 있게 해줍니다.
- 기존 라이브러리 조합 및 버전 문제, 해당 라이브러리의 에러 해결 등에서 많은 불편함을 해결해줄 것입니다.
- 즉, Next.js 는 React 생태계의 문제점들을 해결하고, 다양한 렌더링 옵션과 개발에 필요한 포괄적 기능들을 제공합니다.
